Progress Spinner Component

<span class="progress-spinner" aria-label="Busy" role="img">
  <svg aria-hidden="true" class="icon icon--24">
    <use href="#icon-spinner-24" />
  </svg>
</span>

Small Progress Spinner

Use the progress-spinner--small modifier class to create a small progress spinner.

<span
  class="progress-spinner progress-spinner--small"
  aria-label="Busy"
  role="img"
>
  <svg aria-hidden="true" class="icon icon--20">
    <use href="#icon-spinner-20" />
  </svg>
</span>

Large Progress Spinner

Use the progress-spinner--large modifier class to create a large progress spinner.

<span
  class="progress-spinner progress-spinner--large"
  aria-label="Busy"
  role="img"
>
  <svg aria-hidden="true" class="icon icon--30">
    <use href="#icon-spinner-30" />
  </svg>
</span>