An indeterminate loading indicator, the same ring a loading Button draws.
Example
import { Spinner } from "@elements/ui/spinner";
<Spinner />
<Spinner size="lg" label="Saving draft" />
<button class="button is-primary" disabled><Spinner size="sm" label="" /> Processing</button>
Parts
| Part |
What it is |
.spinner |
The ring. Usable without the template: <span class="spinner is-sm" aria-hidden="true">``</span>. |
Attributes
| Attribute |
Type |
Default |
Description |
size |
"sm" | "md" | "lg" |
"md" |
Diameter from the theme's icon tokens. |
label |
string |
"Loading" |
Accessible name for role=status. An empty label makes the spinner decorative (aria-hidden). |
class |
string |
"" |
Extra classes; one that sets width and height sizes the spinner freely. |
attrs |
Record<string, string | number | boolean | undefined> |
{} |
Any other attributes for the span: id, title, data-*. |
Slots
| Slot |
Content |
default |
Optional. An icon to spin in place of the ring. |
Data attributes
| Attribute |
Values |
On |
data-size |
"sm" | "md" | "lg" |
root |
Accessibility
- role="status" with aria-label from label, so a screen reader announces what is loading.
- label="" removes the role and sets aria-hidden, for a spinner beside text that already says it, or inside an aria-busy container.
- Under prefers-reduced-motion the ring turns at a quarter of the speed.
See also