Feedback
Spinner
A fine ring for work of unknown duration.
On this page
A spinner is a fine ring for work of unknown duration. Its arc fades along its length, so it has a leading end and no hard tail. It takes the current text color, so it reads as ink on moonstone and pearl on obsidian.
Spinner
<span class="spinner" role="status" aria-label="Loading"></span>#Sizes
Sizes
<span class="spinner spinner-sm" role="status" aria-label="Loading"></span><span class="spinner" role="status" aria-label="Loading"></span><span class="spinner spinner-lg" role="status" aria-label="Loading"></span><span class="spinner spinner-xl" role="status" aria-label="Loading"></span>#With text
When a visible label describes the work, hide the spinner from assistive technology and announce the label instead.
With text
<p role="status" class="flex items-center gap-xs m(0) text-sm fg-text-muted"><span class="spinner" aria-hidden="true"></span>Uploading 3 files…</p>#Accessibility
- Give a standalone spinner
role="status"and anaria-label. - Use
aria-hidden="true"when nearby text already describes the progress, as in a busy button. - With reduced motion preferred, the ring turns more slowly.
#Classes
| Class | Description |
|---|---|
spinner | The ring, 16px, in the current text color |
spinner-sm | 12px; the default is 16px. With spinner |
spinner-lg | 24px; the default is 16px. With spinner |
spinner-xl | 36px; the default is 16px. With spinner |
spinner-inline | As large as the icons of the control around it, or 1em where no control sets an icon size. With spinner |
#Custom properties
| Property | Default | Description |
|---|---|---|
--spinner-size | 1rem | Diameter of the ring; a control may set it for the spinner it holds |
--icon-size | Read from the control around the spinner; the stylesheet falls back to 1em. On spinner-inline |