Spinner
Three pulsing squares, not a ring. The same motion appears inside busy buttons and cards.
Examples
Spinner
Syncing two more…
Anatomy
span.spinner | Inline; the squares take the current text colour. |
> span | Required: the middle square. The outer two are the spinner's own pseudo-elements. |
Accessibility
- On its own, give it
role="status"and anaria-labelso it is announced. - Next to visible text that already says what is happening, mark the spinner
aria-hidden="true"instead, so it isn't read twice. - For a button or card that is loading, use
aria-busy="true"on it rather than a spinner inside.