Spinner
Spinner shows that work is in progress when you do not know how long it will take.
Always set label or provide child text so assistive tech announces the wait state. Pick a SpinnerSize to match surrounding typography. Indeterminate only — use ProgressBar or ProgressCircle when you have a measurable completion value.
- Inline waits inside panels, cards, or empty states
- Button loading states and Backdrop overlays during async work
Prefer ProgressBar for known totals. Prefer LoadingBar for app-wide route transitions.
Indeterminate spinner for async waits when no progress percentage is known. Default medium size suits inline placement beside text or inside cards.
Always provide an accessible label describing what is loading. The label is linked via aria-labelledby so screen readers announce the wait state.
Large spinners draw attention in empty states or full-width loading panels.
Compare size presets from tiny through huge when aligning spinners with surrounding typography.
Child text can serve as the accessible label when a separate label prop is not needed.
Spinner stroke colors inherit brand tokens from the Orbital theme provider.