How to build an accessible Spinner in React
role="status" with an accessible label (default "Loading", i18n-driven) so assistive tech announces the busy state rather than leaving the spin silent
When to use a Spinner
- 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 it
- Progress with a known percentage — use ProgressBar or ProgressCircle
- Loading content with a known structure — use Skeleton
Accessibility
Role status, verified at WCAG 2.2-AA.
Common mistakes
Avoid: A full-page spinner for content whose layout is known
Prefer: <Skeleton> mirroring the content shape to reduce perceived wait and layout shift
Skeletons preview structure and feel faster; spinners are best for short, shapeless waits
Example
<Spinner />