Spinners

A spinner is a turning circle that tells your visitor something is on its way: a page, a list of search results, a number that is still being counted. It asks for patience without saying how long it will take.

Use a spinner when you don't know how long the wait is. When you do know, a progress bar says more. For a button that is busy, use the loading button.

In use: the order overview example shows a list under a veil while it loads, and the catalogue progress example has small spinners in its rows.

A spinner is a small SVG with one circle in it, inside an element with the class spinner. Without any other class the spinner is large and fixed to the middle of the page, on top of everything else. Use it while a whole page or view is loading.

<div class="spinner" role="status" aria-label="Loading">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="20" />
  </svg>
</div>

To dim the page behind the spinner, wrap it in an element with the classes fetching page. This veil covers the whole screen, the navigation included, so nothing can be clicked while the page is loading. Add the class active to show the veil, and remove it when the page is ready.

<div class="fetching page active">
  <div class="spinner" role="status" aria-label="Loading">
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="20" />
    </svg>
  </div>
</div>

Accessibility: a spinner has no text, so give it role="status" and an aria-label such as “Loading”. Remove the spinner from the page, or set the hidden attribute, as soon as the wait is over. For visitors who prefer reduced motion the circle keeps turning, but slowly and without growing and shrinking.

E-ink: in the e-ink theme a spinner can’t turn: it shows as a still, open circle, always in black. Put a word such as “Loading…” next to it, so it isn’t taken for decoration.

Add inside to keep the spinner in the middle of one part of the page. It centers itself in the nearest element with position: relative.

To cover content that is being replaced, wrap the spinner in an element with the class fetching, this time without page. This puts the veil over the nearest positioned element only; the content stays in place, so the page doesn't jump. Add the class active to show the veil, and remove it when the new content is there.

<div style="position: relative">
  ... the content ...

  <div class="fetching active">
    <div class="spinner inside" role="status" aria-label="Loading">
      <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="20" />
      </svg>
    </div>
  </div>
</div>

With small, medium or large the spinner takes its place in the flow of the page, like an image. A small spinner is as high as a line of text, so it fits in a sentence, a table cell or a heading.

<span class="spinner small" role="status" aria-label="Loading">...</span>
<span class="spinner medium" role="status" aria-label="Loading">...</span>
<span class="spinner large" role="status" aria-label="Loading">...</span>

A spinner is blue. Add the name of a color from the palette, or gray, to change it. For any other color, set the custom property --nausikaa-spinner-color.

<span class="spinner medium green" role="status" aria-label="Loading">...</span>

<span class="spinner medium" style="--nausikaa-spinner-color: currentColor" ...>...</span>