Spinner
A spinner is an animated spinning icon that lets users know content is being loaded.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Spinner } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'medium' | Match the spinner to what it sits in. Small inside a button, large for a whole panel. |
| label | string | 'Loading' | Names what is happening for a screen reader. Say the work, as in Loading conversations. |
Accessibility
What the component does for you, and what it needs from you.
- The label is the accessible name, so it is what a screen reader announces. Progress or Loading on its own wastes it.
- The spin respects a reduced motion preference.
- Announce the outcome when the wait ends, because the spinner disappearing is not an announcement.