role status
Spinner draft v0.1.0
Says that something is loading when its length is unknown, as a turning ring with a label.
A spinner is the indeterminate loading indicator: a ring turns while a request, a page or a part of it loads, and a label names what loads, shown or kept for assistive technology. Use it for short waits in a small area (a button, a panel); for a long or measurable wait, a Progress bar; for content whose layout is known, Skeletons. Other systems call it an activity indicator, a loading indicator or a progress circle.
Decisions
From decisions in packages/components/specs/components/spinner.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.
Color
-
The still part of the ring is the third neutral base fill and the arc the accent brand fill (the Progress bar's track and indicator); a shown label is secondary text.
ring-colors· 2026-10-03 · v0.1.0spinner.ring.border-colorspinner.ring.colorspinner.label.color
Size
-
Three sizes from the size scale: small (16 px, 1.2 px stroke), medium (24 px, 2.4 px, the default) and large (32 px, 2.4 px).
sizes· 2026-10-03 · v0.1.0spinner.ring.size.*spinner.ring.border-width.*
Accessibility
-
A spinner is a polite status message whose text is its label, always present and visually hidden by default; the ring is hidden. One full turn takes four times the normal duration (1 s); under reduced motion the ring pulses between full and 40 % opacity instead of turning.
status-message· 2026-10-03 · v0.1.0spinner.ring.animation.*spinner.ring.opacityWCAG 4.1.3 Status Messages (AA)WAI-ARIA 1.2: status role (polite, atomic)WCAG 2.3.3 Animation from Interactions (AAA)