Spinner
A small ring of ticks in the brand color that turns while something loads and the wait is short and unknown.
Master
Switch size. Show label writes it beside the ring; screen readers always hear it. With reduced motion the ticks stay still.
Usage
Use Spinner for a short wait with no known end, in the spot that is loading: a panel refreshing, a list fetching more, a Drawer loading a record. It is one component: pick a size. label is read by screen readers (Loading by default); showLabel writes it next to the ring, like Loading invoices…. For a button that is working, use Button loading. For content with a known layout, use Skeleton; for a known amount done, use Meter; for a line of status text, use TextLoader. See contracts/spinner.json for the full contract.
Do's
- A short wait with no known end, in the place that is loading.
- A panel, list or Drawer fetching data where the layout is not known yet.
Don'ts
- Do not put it in a Button. Use Button loading.
- Do not use it when the amount done is known. Use Meter.
- Do not use it for content with a known layout. Use Skeleton.
- Do not use more than one for the same wait.
- Do not use raw hex.
<Spinner size="md" />