Spinners

A turning ring, 1 em across in the color of the text around it, for something small that is on its way. A button shows its own while busy; a region shows an overlay.

Examples

The words beside the spinner say what is happening; the ring alone is hidden from assistive technology.

Rebuilding 3 pages… Larger, in the accent

<span class="hstack gap-8"><span class="spinner-border" aria-hidden="true"></span>Rebuilding 3 pages…</span>
<span class="hstack gap-8 text-primary fs-20"><span class="spinner-border" aria-hidden="true"></span>Larger, in the accent</span>

A growing dot

spinner-grow is a dot that grows and fades in place of the ring, for a calmer sign in a line of text.

Checking the server… Syncing the calendar

<span class="hstack gap-8"><span class="spinner-grow" aria-hidden="true"></span>Checking the server…</span>
<span class="hstack gap-8 text-success"><span class="spinner-grow" aria-hidden="true"></span>Syncing the calendar</span>

Accessibility

A spinner moves even for people who ask for less motion - it is the sign that something is happening - and stays a ring or a dot in forced colors.
Say the same in words, in a live region when it starts after an action.

Tokens

From css/components/spinner.css, which declares no custom property of its own.