Spinner
Indeterminate loading indicator.
Usage
Import Spinner and drop it anywhere you need an indeterminate loading indicator.
It ships as a single component — no sub-parts.
Sizes
Three sizes from the size prop: sm (16 px), md (24 px), and lg (40 px).
Colors
Semantic tones via the color prop — all driven by --sve-* tokens through currentColor.
Props
Plus every native <span> attribute via prop spreading. The role="status" and aria-label are always applied — override label to localise the accessible name.
| Prop | Type | Default |
|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' |
color | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default' | 'default' |
label Names the spinner and makes it announce itself. **Leave it unset unless the spinner is the only thing on screen.** Without it the spinner is `aria-hidden` — decoration — which is what you want in almost every case, because something beside it already says what is happening: visible text, a `Button loading`, or a `Busy` region. It used to default to `'Loading'`, which made every spinner a live region. `<Busy label="Loading projects"><Spinner /></Busy>` then produced TWO announcements for one event — the spinner's on insertion, and `Busy`'s 400ms later — and the first defeated the debounce that exists to stop exactly that. Verified by counting `role="status"` elements in the subtree. `'Loading'` said nothing useful anyway: loading *what*? | string | — |
class Extra classes merged onto the root element. | string | — |