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-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-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-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-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-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-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-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-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>