Concord
InfoComponentsUtilities

Spinner

A loading indicator displayed as a spinning circle.

Basic Usage

You can create a Spinner by giving a div element the 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.

HTMLCopied!
<div class="spinner" role="status">Loading...</div>

No Label

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

HTMLCopied!
<div class="spinner" role="status">
  <span class="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.

HTMLCopied!
<div class="spinner" role="status">
  <span class="wrap 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 label-top, label-right, label-bottom (default), or label-left classes.

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

Sizes

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

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

Delay

You can delay the appearance of a Spinner by adding the 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 --spinner-delay CSS variable on the element.

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