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 id="62bec836ae452" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="62bec836ae449">
</div>

    </div>

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

<div id="62bec836ae756" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--md" aria-busy="true" role="progressbar" data-uid="62bec836ae750">
</div>

    </div>

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

<div id="62bec836ae806" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--lg" aria-busy="true" role="progressbar" data-uid="62bec836ae800">
</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 id="62bec836aea84" class="c-loader c-loader__linear--color--black c-loader__linear c-loader__linear--md" aria-busy="true" role="progressbar" data-uid="62bec836aea80">
</div>

    </div>

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

<div id="62bec836aeae9" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--md" aria-busy="true" role="progressbar" data-uid="62bec836aeae5">
</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 id="62bec836aed10" class="c-loader c-loader__circular--color--primary c-loader__circular c-loader__circular--md" aria-busy="true" role="progressbar" data-uid="62bec836aed0c">
</div>

    </div>

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

<div id="62bec836aed67" class="c-loader c-loader__circular--color--secondary c-loader__circular c-loader__circular--md" aria-busy="true" role="progressbar" data-uid="62bec836aed64">
</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: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Loader/loader.json