Spinner

Basic Usage

You can create a Spinner by giving a div element the spinner class.

All Spinners should have a role of progressbar. Additionally, Spinners without a label should have an aria-label attribute.

<div
  class="spinner"
  role="progressbar"
  aria-label="loading"
></div>

Label

You can add a label to the Spinner by placing text inside the div element.

Loading...

<div class="spinner" role="progressbar">Loading...</div>

Complex Labels

If your label consists of more than one node, wrap it in a span or similar element to group it into a single node.

Zipping your files...

<div class="spinner" role="progressbar">
  <span class="flow densest">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 256 256"
    >
      <g fill="currentColor">
        <path d="M208 88h-56V32Z" opacity=".2"></path>
        <path
          d="M184 144h-16a8 8 0 0 0-8 8v56a8 8 0 0 0 16 0v-8h8a28 28 0 0 0 0-56m0 40h-8v-24h8a12 12 0 0 1 0 24m-48-32v56a8 8 0 0 1-16 0v-56a8 8 0 0 1 16 0m-40 56a8 8 0 0 1-8 8H56a8 8 0 0 1-7-12l25.16-44H56a8 8 0 0 1 0-16h32a8 8 0 0 1 7 12l-25.21 44H88a8 8 0 0 1 8 8M213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v16a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66M160 80V51.31L188.69 80Z"
        ></path>
      </g>
    </svg>
    Zipping your files...
  </span>
</div>

Label Position

You can change the position of the label by using the label-top, label-right, label-bottom (default), or label-left classes.

Top

Right

Bottom (default)

Left

<div class="spinner label-top" role="progressbar">Top</div>
<div class="spinner label-right" role="progressbar">
  Right
</div>
<div class="spinner label-bottom" role="progressbar">
  Bottom (default)
</div>
<div class="spinner label-left" role="progressbar">
  Left
</div>

Size

You can make a Spinner smaller by adding the small class or larger by adding the large class.

Small

Medium (default)

Large

<div class="spinner small label-right" role="progressbar">
  Small
</div>
<div class="spinner label-right" role="progressbar">
  Medium (default)
</div>
<div class="spinner large label-right" role="progressbar">
  Large
</div>