Loader

Displays progress loaders in different shapes.

Size

<div class="grid">
    <div class="grid-ms-4 grid-md-4 grid-lg-4">
            <!-- loader.blade.php -->

<div class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="673ed2838a0c4">
</div>

    </div>

    <div class="grid-ms-4 grid-md-4 grid-lg-4">
            <!-- loader.blade.php -->

<div class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--md" aria-busy="true" role="progressbar" data-uid="673ed2838a10b">
</div>

    </div>

    <div class="grid-ms-4 grid-md-4 grid-lg-4">
            <!-- loader.blade.php -->

<div class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--lg" aria-busy="true" role="progressbar" data-uid="673ed2838a13b">
</div>

    </div>
</div>

<div class="grid">
    <div class="grid-ms-4 grid-md-4 grid-lg-4">
        @loader(['size' => 'sm'])
        @endloader
    </div>

    <div class="grid-ms-4 grid-md-4 grid-lg-4">
        @loader(['size' => 'md'])
        @endloader
    </div>

    <div class="grid-ms-4 grid-md-4 grid-lg-4">
        @loader(['size' => 'lg'])
        @endloader
    </div>
</div>

Shape

<div class="grid">
    <div class="grid-ms-6 grid-md-6 grid-lg-6">
            <!-- loader.blade.php -->

<div class="c-loader c-loader__linear--color--black c-loader__linear c-loader__linear--md" aria-busy="true" role="progressbar" data-uid="673ed2838a457">
</div>

    </div>

    <div class="grid-ms-6 grid-md-6 grid-lg-6">
            <!-- loader.blade.php -->

<div class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--md" aria-busy="true" role="progressbar" data-uid="673ed2838a483">
</div>

    </div>
</div>

<div class="grid">
    <div class="grid-ms-6 grid-md-6 grid-lg-6">
        @loader(['shape' => 'linear'])
        @endloader
    </div>

    <div class="grid-ms-6 grid-md-6 grid-lg-6">
        @loader(['shape' => 'circular'])
        @endloader
    </div>
</div>

Color

<div class="grid">
    <div class="grid-ms-6 grid-md-6 grid-lg-6">
            <!-- loader.blade.php -->

<div class="c-loader c-loader__circular--color--primary c-loader__circular c-loader__circular--md" aria-busy="true" role="progressbar" data-uid="673ed2838a6bb">
</div>

    </div>

    <div class="grid-ms-6 grid-md-6 grid-lg-6">
            <!-- loader.blade.php -->

<div class="c-loader c-loader__circular--color--secondary c-loader__circular c-loader__circular--md" aria-busy="true" role="progressbar" data-uid="673ed2838a6e5">
</div>

    </div>
</div>

<div class="grid">
    <div class="grid-ms-6 grid-md-6 grid-lg-6">
        @loader(['color' => 'primary'])
        @endloader
    </div>

    <div class="grid-ms-6 grid-md-6 grid-lg-6">
        @loader(['color' => 'secondary'])
        @endloader
    </div>
</div>

Blade component parameters

Key	Default value	Type	Available values	Description
componentElement	div	string	-	The tag for the component
shape	circular	string	-	Visual shape for the loader (circular, linear)
size	md	string	-	Size for the loader (xs, sm, md, lg, xl)
color	black	string	-	black, white, secondary, primary
text		string	-	Loading text
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes
containerAware	false	boolean	true/false	Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.

Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Loader/loader.json