Spinner
Indeterminate loading indicator
Category: feedback · WCAG 2.2-AA · loading, progress, feedback
Sizes
- sm
- md
- lg
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
label | string | Loading | Accessible label announced by screen readers |
Design tokens
--cascivo-radius-full
When to use
- Indicating indeterminate work where duration and progress are unknown
- Loading a small region or inline control where a shape preview is unnecessary
- Showing busy state in buttons or compact UI
When not to use
- Progress with a known percentage — use ProgressBar or ProgressCircle
- Loading content with a known structure — use Skeleton
How to build an accessible Spinner in React →
Examples
Default
<Spinner />Large
<Spinner size="lg" />Related components
- Skeleton — Skeleton suits content with a known shape
- ProgressBar — ProgressBar suits determinate progress