Spinner

A hairline ring that turns while something is busy and there’s no progress to show: a tab loading, a refresh in flight. The same ring the busy button uses.

CSS: css/components/spinner.css

01 — Variants

Sizes

Small (14px) sits in a tab or a label, the default (16px) beside a line of text, large (28px) in an empty panel.

With text

.loading pairs a spinner with a line of muted text. Hide the spinner from screen readers; the text says it.

Loading pods…

In a tab

A small spinner inside a tab label while its panel loads.

Pods

02 — Usage

Use it for

Short waits of unknown length.
Refreshing data that’s already on screen.
A tab or panel loading its content.

Avoid

Work with a known length, such as an upload. Use .progress.
Content whose shape you know. Use .skeleton.
Several spinners at once. Show one for the region that’s loading.

03 — Accessibility

Notes

A spinner on its own gets role="status" and an aria-label that says what’s loading.
Next to text that says it, hide the spinner with aria-hidden="true".
With reduced motion it stops turning and shows as a faint full ring.