Spinner
Loading indicators for async states, background fetches, and actions that need a clear pending signal.
API
All inputs and configuration options for zyra-spinner.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Diameter of the spinner |
color | 'accent' | 'accent-2' | 'white' | 'current' | 'accent' | Spinner track color |
label | string | 'Loading…' | Screen-reader-only label for accessibility |
Tokens
CSS custom properties zyra-spinner reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Accent track--zyra-color-primary-subtle | var(--zyra-color-accent-muted) | Ring color of the accent variant. |
Accent head--zyra-color-primary | var(--zyra-color-accent) | Spinning-tip color of the accent variant. |
Inverse track--zyra-color-spinner-inverse-track | tuned per theme | Ring color of the white variant. Always light regardless of app theme, not tied to text color. |
Inverse head--zyra-color-spinner-inverse-head | tuned per theme | Spinning-tip color of the white variant. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="status" so screen readers announce the loading state
- label is visually hidden but announced to screen readers
- When embedding in a button, set button aria-busy="true" alongside the spinner