A sized indeterminate ring that inherits the current text colour, announces its label once, and holds still under reduced motion.
DefaultLargeReduced motion
Loading Loading invoices Loading
The label is announced once; the ring holds still under reduced motion.
<Spinner size={24} label="Loading invoices" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Spinner } from '@chanrg/4ui';<Spinner size={24} label="Loading invoices" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 16 | Diameter in pixels; the stroke width scales with it. |
label | string | 'Loading' | Announced by screen readers while the spinner is mounted. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- role="status" with a visually hidden label, so the wait is announced without describing the animation.
- Under reduced motion the ring stops as a complete, dimmed circle rather than freezing mid-turn.