Spinner

A loading indicator displayed as a spinning circle.

Basic Usage

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

All Spinners should have a role of status and include text content, which will be announced by screen readers when the spinner appears. By default, the text content is displayed underneath the spinner.

<div class="cd-spinner" role="status">Loading...</div>

No Label

To create a spinner with no visible label, wrap the text inside a span with the class cd-visually-hidden.

<div class="cd-spinner" role="status">
  <span class="cd-visually-hidden">Loading...</span>
</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="cd-spinner" role="status">
  <span class="cd-wrap cd-spacing-densest">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 256 256"
      aria-hidden="true"
    >
      <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 cd-label-position-top, cd-label-position-right, cd-label-position-bottom (default), or cd-label-position-left classes.

Top

Right

Bottom (default)

Left

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

Size

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

For fine-grained control over sizing, you can set the --cd-spinner-scale CSS variable on the Spinner element. The value of this variable must be a unitless number. A value of 1 corresponds to the default size.

Small

Medium (default)

Large

Custom scale (1.25)

<div
  class="cd-spinner cd-size-small cd-label-position-right"
  role="status"
>
  Small
</div>
<div
  class="cd-spinner cd-label-position-right"
  role="status"
>
  Medium (default)
</div>
<div
  class="cd-spinner cd-size-large cd-label-position-right"
  role="status"
>
  Large
</div>
<div
  class="cd-spinner cd-label-position-right"
  style="--cd-spinner-scale: 1.25"
  role="status"
>
  Custom scale (1.25)
</div>

Delay

You can delay the appearance of a Spinner by adding the cd-is-delayed class.

This is useful when an operation normally completes quickly, and you only want to show the Spinner if it's taking longer than usual.

You can customize the delay by setting the --cd-spinner-delay CSS variable on the element.

I have the default delay

I have a custom 500ms delay

<div
  class="cd-spinner cd-label-position-right cd-is-delayed"
  role="status"
>
  I have the default delay
</div>
<div
  class="cd-spinner cd-label-position-right cd-is-delayed"
  role="status"
  style="--cd-spinner-delay: 500ms"
>
  I have a custom 500ms delay
</div>