Loading
A spinner when the layout is unknown. Nothing under ~300ms.
Spec
- Color:
--signalorcurrentColor. - Sizes: 16, 24, 32.
- Demos (and product) wait 300ms before showing. Fast refresh stays quiet.
- Reduced motion: static ring, not a spin.
- Standalone:
role="status"and a visible oraria-labelsuch as “Refreshing metrics”. - Skeletons when the layout is known. Spinners when it is not.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Sizes. Demo waits 300ms before the named spinner.
Do / Don't
| Do | Don't |
|---|---|
| Wait 300ms. | Flash a spinner on a 80ms refresh. |
| Name the job: Refreshing metrics. | Loading… |
| Static ring under reduced motion. | A bouncing trio of dots. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
rotate | 700ms linear loop | --ease-linear | visible | static ring |
| opacity | after 300ms, 120ms | --ease-out | delay | instant at 300ms |
Never flash more than three times per second.
Accessibility
- Standalone spinner has a name. Decorative spinner next to “Refreshing metrics” is
aria-hidden. role="status"/ polite live region when the message changes.- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.