Spinner
A turning ring in a hue, the size of the text, for waiting with no known end; a busy button shows the same ring after its label.
Example
View Code
<p><span class="spinner" role="status" aria-label="Loading"></span> Loading the latest posts</p>
When to use it
A wait with no known end: a page section still fetching, a search running. When the length is known, use progress. When the wait belongs to a button, set aria-busy="true" on the button and the ring appears there by itself.
How it works
A one-em ring: a border in the hue's subtle step with the top edge in the hue, turning once per --yeti-spinner-duration. data-size sets the em through the text step, so a spinner sits in a line of text at that text's size. A button with aria-busy="true" draws the same ring after its label from its own text colour, so it reads on a filled button and an outlined one alike.
<button class="button" aria-busy="true" aria-disabled="true">Saving</button>
Accessibility
Standing alone, give the spinner role="status" and an aria-label such as "Loading", so the wait is announced once and not again. Inside a busy button it needs nothing more: aria-busy on the button says it. Under reduced motion every animation duration collapses, so the ring stands still; a still ring with one bright edge still reads as "waiting".
Attributes
| Attribute | Type | Values | Default | Description |
|---|---|---|---|---|
data-variant |
enum | primary, secondary, success, warning, alert, neutral |
primary |
The hue of the bright edge. |
data-size |
enum | sm, md, lg |
md |
The ring is one em of the size's text step. |
Children
No structural requirements.
Tokens
| Token | Description |
|---|---|
--yeti-spinner-duration |
One turn. |
--yeti-spinner-width |
Thickness of the ring. |
--yeti-motion-iterations |
How many times the ring turns; one under reduced motion. |
--yeti-color-primary |
The default variant's colour, when data-variant is absent. |
--yeti-color-primary-subtle |
The default variant's tint. |
--yeti-color-primary-soft |
The default variant's soft stop. |
--yeti-color-primary-strong |
The default variant's strong stop. |
--yeti-color-primary-text |
The default variant's text colour. |
--yeti-on-primary |
Text on the default variant's colour. |
--yeti-text-md |
The text step when data-size is absent; the ring's diameter follows it. |
--yeti-space-sm |
The space step when data-size is absent. |
Internal tokens (may change between minor versions)
- `--_yeti-variant` - `--_yeti-variant-subtle` - `--_yeti-size-text` - `--_yeti-variant-soft` - `--_yeti-variant-strong` - `--_yeti-variant-text` - `--_yeti-on-variant` - `--_yeti-size-space`Accessibility
- Standing alone, give it role="status" and an aria-label such as "Loading", so the wait is announced once. Inside a button that carries aria-busy="true" it needs nothing: the button already says it is busy, and the ring appears by itself. Under reduced motion the ring stands still.
Browser support
- Used without guards: individual transform properties, color-mix()
- Behind
@supports: nothing
JavaScript
None. This component is CSS only.
Available since 7.0.0.