User Interface (UI)

Let's start with how a spinner looks: its parts, its size and colour, how it moves and the one variable you can set.

Anatomy

Every spinner has all three parts, and nothing else. The indicator is what people watch, so it's the part that has to stand out (see Contrast), while the track stays faint. We recommend drawing both as strokes in one <svg>, with a 16 × 16 viewBox and a track at 25% opacity. The parts always render in the same order, which you can see in the DOM contract.

Size and colour

The Spinner takes its size and colour from where it sits, just like an icon. It's 1em wide, the size of the text around it, and it's drawn in currentColor, the colour of that text. Next to a label, it lines up without any setup, and to give it another size, you can set --spinner--size from a class.

import styles from "./Loading.module.css";

export function Loading() {
  return (
    <>
      <p>
        <Spinner /> Saving draft
      </p>
      <h2>
        <Spinner /> Loading results
      </h2>
      <Spinner className={styles.large} />
    </>
  );
}

.large {
  --spinner--size: 2rem;
}

Inside a component, the component sets the size. In a Button, the Spinner is as big as the Button's icons, with --button--icon--size. A spinner on its own, in the middle of a panel that's loading, is where a larger size comes in.

Keep in mind that these examples only show sizes. On a real page, the text that says what's loading goes in a status message, so screen readers hear it too, as under Say what's loading.

States

The Spinner can't be hovered, focused or pressed, so it has no interactive states. It's in the page while something's busy and gone once it's done, and while it's there, it moves in one of two ways:

You'll find why it pulses under Motion. The wait it shows has states of its own, like done and failed, which belong to the page, and you'll find those under Every state.

Tokens

The Spinner doesn't read any theme tokens. Its colour is currentColor, so it follows whatever colour, theme or colour scheme the text around it follows. It has a single variable of its own:

The Spinner's styles sit in the components cascade layer, so a class of yours that sets --spinner--size wins without any specificity tricks, as in the example above. To change its colour, set color on it, or on the text around it.

UI Checklist