Spinner
A spinner is an animated icon that shows content is loading.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 tells people nothing.
- The spin respects a reduced motion preference.
- Announce the result when the wait ends. Screen readers do not announce a spinner disappearing.