Spinner
Last Updated: September 2026Spinners communicate indeterminate system status when content is loading or an action is processing. They are best suited for applications where progress predictability is low.
Source CodeAnatomy
link- 1Track circle
- 2Arc
Variants
linkAccent
Default. Accent stroke on a subtle ring.
Neutral
Tertiary stroke for quieter contexts.
Usage Guidelines
linkWhen to use
- •For indeterminate loading on a compact control or content block.
- •Inside buttons (via Button loading) or icon-sized slots.
- •When a circular indicator reads clearer than a linear bar.
When not to use
- •For full-width page or table loading — prefer Bar.
- •For completed/failed states — use DotStatus or Tag.
- •For multi-step progress — use Stepper.
Pair Spinner with nearby status text when the wait is noticeable.
Don't show multiple spinners for the same pending request.
Prefer Button loading for submit actions — it swaps in Spinner and disables.
Don't replace a button with a bare Spinner without disabling the action.
Behaviors
linkAnimation
- •Spinner rotates continuously via CSS animation.
- •Default size is 24×24; override with className or width/height carefully — viewBox is fixed.
Color
- •color="accent" (default) or color="neutral".
- •aria-label defaults to "Loading".
Content Guidelines
linkAccompanying text
- •Use short present-tense copy ('Loading…', 'Saving…').
- •Avoid exposing real identifiers or PHI in loading messages.
Accessibility
linkText & Labels
- •Default aria-label is "Loading". Override when the region needs a specific name.
- •When possible, keep visible text that describes what is loading.
ARIA attributes
- •Renders an SVG with aria-label for assistive tech.
Keyboard Support
- •Spinner is not interactive and is not in the tab order.
WCAG Compliance Standards
FAQs
linkHow do I use Spinner in a Button?
Set loading on Button — it shows Spinner and disables interaction. You usually don't nest Spinner manually.
Accent vs neutral?
Accent matches brand emphasis. Neutral is quieter on dense surfaces.
Can I change the size?
Pass className (e.g. size utilities) or SVG sizing props. The graphic viewBox stays 24×24.