Spinner
Displays an indeterminate loading indicator with tone and an accessible label.
Component behavior
Spinner indicates loading without a progress value or completion estimate. Use it for an active operation. Consider skeleton content for an initial page load.
- Loading indicators within buttons or fields.
- Background-job indicators beside a label.
- Indeterminate progress within a LoadingOverlay.
Skeleton: initial content has a known layout.
ProgressBar: the operation provides measurable progress.
LoadingOverlay: an entire region is loading or refreshing.
Props
Spinner extends HTMLAttributes<HTMLSpanElement> (minus children).
| Prop | Type | Default | Description |
|---|---|---|---|
size | SpinnerSize | number | "md" | "xs" (10px) | "sm" (12) | "md" (16) | "lg" (24), or a pixel diameter. |
tone | SpinnerTone | "primary" | Tone color. The inherit value uses currentColor. |
thickness | number | — | Ring thickness in px. Defaults to a proportion of the diameter. |
label | string | null | "Loading" | Screen-reader label on a role="status" node. Pass null when visible text already says it. |
Examples
Sizes
Tones
With a label
Say what is happening, not that something is happening.
In a button
loading replaces the leading icon with an inherit-tone spinner and disables the button. The label remains to preserve width.
Reduced motion
With prefers-reduced-motion, the ring pulses instead of rotating.
import { Spinner } from "@solarius/onset";
import type { SpinnerSize, SpinnerTone } from "@solarius/onset";
<Spinner />
<Spinner size="lg" tone="ok" />
// Inside your own control, taking the surrounding color:
<Spinner size="sm" tone="inherit" label={null} />For a region rather than a control, see LoadingOverlay; for a first load, Skeleton.