Spinner
An accessible loading status primitive with SVG and composition support.
Features
Accessible loading status
Inline SVG fallback
Current color styling
Decorative mode
asChild composition
Installation
npm install @ariaui/spinner
Examples
Spinner examples show announced loading status, decorative indicators for controls that already include loading copy, and custom SVG, icon, or motion components rendered through asChild.
Default
Announce loading with the default status semantics and currentColor SVG.
No preview output yet.
Button
Use aria-hidden when button text already communicates the pending state.
No preview output yet.
Custom SVG
Render a custom SVG through asChild while keeping Spinner.Root accessibility defaults.
No preview output yet.
Heroicon
Slot a Heroicons SVG through Spinner.Root and animate it with application classes.
No preview output yet.
Framer Motion
Slot a Framer Motion SVG through Spinner.Root to control the loop with motion props.
No preview output yet.
Anatomy
import * as Spinner from "@ariaui/spinner";
export default function Example() {
return <Spinner.Root />;
}
API Reference
Root
Loading status primitive. Renders an accessible inline SVG by default and supports `asChild` composition for custom SVG indicators.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
aria-label | string | "Loading" |
aria-hidden | boolean | "true" | "false" | — |
| Attribute | Values |
|---|---|
| role | "status" by default |
| aria-label | "Loading" by default |
| aria-hidden | consumer controlled |
Accessibility
Spinner.Root exposes role="status" and aria-label="Loading" by default so loading state changes can be announced politely.
Use a specific aria-label such as "Saving" or "Loading messages" when the page can show more than one loading indicator.
When nearby visible text already communicates the pending state, pass aria-hidden so the spinner is treated as decorative.