Progress bar
A progress bar communicates the status of a system process.
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 { ProgressBar } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | How far along the work is, from 0 to 1. Leave it out when you cannot know, and the bar runs indeterminate instead. |
| appearance | 'default' | 'success' | 'inverse' | 'default' | Success marks work that finished. Inverse is for a bar sitting on a bold ground. |
| label | string | 'Progress' | Names the work for a screen reader. Say what is happening, as in Uploading files. |
Accessibility
What the component does for you, and what it needs from you.
- A bar with a value reports it, so a screen reader hears the fraction rather than a description of a rectangle.
- An indeterminate bar says work is happening without claiming to know how much is left, which is the honest thing to announce.
- The label is the accessible name and is required in practice, since Progress on its own does not say what is running.