Spinner
An animated loading indicator for asynchronous operations. Renders as a spinning circle with a primary-colored arc.
Sizes
Loading…
sm
Loading…
default
Loading…
lg
<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | "default" | Controls the diameter of the spinner. |
className | string | — | Additional CSS classes to apply to the spinner element. |
Accessibility
Spinner renders with role="status" and an aria-label so screen readers announce the loading state rather than silently skipping over it.
For standalone loading pages, pair Spinner with visible text ("Loading…") for sighted users — the animation alone carries no meaning for users who have turned off the spinner via reduced motion.