Spinner
An indeterminate loading indicator for waits too short or too unpredictable to measure.
Spinner or Skeleton?
Use a Skeleton when you know the shape of what's coming and want to hold its space. Use a spinner for in-place waits where there's no layout to reserve — a button mid-submit, a panel refreshing. For a wait you can actually measure, use Progress.
Sizes
Inside a button
Disable the button while it spins, so the same action can't be fired twice.
Filling a panel
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | Diameter. |
| label | string | Accessible label announced to screen readers. Not rendered visually. |
Why it works this way
Why
- It inherits the text colour, so it works on any background, including inside a button.
Don't
- Don't use it for first-load of a list or card. Use Skeleton, which shows the shape of what's coming.