Loader

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

<div class="c-loader c-loader__linear--color--black c-loader__linear c-loader__linear--sm" aria-busy="true" role="progressbar" data-uid="69f0d05b703d8" data-component="loader">
</div>

            </div>
                    <div class="grid-ms-4 grid-md-4 grid-lg-4 u-aspect-ratio--1-1">
                    <!-- 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="69f0d05b70455" data-component="loader">
</div>

            </div>
                    <div class="grid-ms-4 grid-md-4 grid-lg-4 u-aspect-ratio--1-1">
                    <!-- loader.blade.php -->

<div class="c-loader c-loader__linear--color--black c-loader__linear c-loader__linear--lg" aria-busy="true" role="progressbar" data-uid="69f0d05b7048d" data-component="loader">
</div>

            </div>
            </div>
    <div class="grid">
                    <div class="grid-ms-4 grid-md-4 grid-lg-4 u-aspect-ratio--1-1">
                    <!-- 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="69f0d05b704d5" data-component="loader">
</div>

            </div>
                    <div class="grid-ms-4 grid-md-4 grid-lg-4 u-aspect-ratio--1-1">
                    <!-- 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="69f0d05b70506" data-component="loader">
</div>

            </div>
                    <div class="grid-ms-4 grid-md-4 grid-lg-4 u-aspect-ratio--1-1">
                    <!-- 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="69f0d05b70534" data-component="loader">
</div>

            </div>
            </div>

@foreach(['linear', 'circular'] as $shape)
    <div class="grid">
        @foreach(['sm', 'md', 'lg'] as $size)
            <div class="grid-ms-4 grid-md-4 grid-lg-4 u-aspect-ratio--1-1">
                @loader(['shape' => $shape, 'size' => $size])
                @endloader
            </div>
        @endforeach
    </div>
@endforeach

<div class="grid">
    <div class="grid-ms-6 grid-md-6 grid-lg-6 u-aspect-ratio--1-1">
            <!-- 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="69f0d05b7086f" data-component="loader">
</div>

    </div>

    <div class="grid-ms-6 grid-md-6 grid-lg-6 u-aspect-ratio--1-1">
            <!-- 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="69f0d05b708aa" data-component="loader">
</div>

    </div>
</div>

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

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