Progress bar
A progress bar shows the status of a system process.
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 { ProgressBar } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | None | How far along the work is, from 0 to 1. Leave it out when you do not know, and the bar shows as indeterminate. |
| appearance | 'default' | 'success' | 'inverse' | 'default' | Success marks work that finished. Inverse is for a bar on a bold background. |
| 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 screen readers announce how much is done.
- An indeterminate bar says work is happening without saying how much is left.
- The label is the accessible name, so always set it. Progress on its own does not say what is running.