Spinner
v0.4.0A loading spinner with size variants and accessible labeling.
A loading spinner with size variants and accessible labeling.
A pure CSS animated loading indicator. Uses role="status" and aria-label so screen readers announce the loading state without visual output.
Usage
Examples
Small
Medium (default)
Large
Custom Label
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | Controls the diameter |
| label | string | 'Loading...' | aria-label text for screen readers |
| className | string | - | Additional CSS classes |
All other native <span> attributes are forwarded to the root element.
Accessibility
role="status"announces loading state to screen readersaria-labelcarries the human-readable label (defaults to "Loading...")- The visible circle is
aria-hidden="true"to avoid redundant announcements
Compositions
Open all 4 →Properties
Spinner props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional class names to merge with the component root element |
label | string | Loading... | Accessible label announced to screen readers while loading |
size | "sm" | "md" | "lg" | md | Controls the size; defaults to md |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).