How to build an accessible Progress in React
Uses the native <progress> element which maps to role="progressbar" automatically; aria-label or aria-labelledby is required for indeterminate state
When to use a Progress
- Tracked operations with a known total (file uploads, multi-step imports)
- Showing completion percentage of a long-running task
When not to use it
- Unbounded waits of unknown duration — use Spinner
- Single-action button loading state — use the button's own loading prop
Accessibility
Role progressbar, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Progress />
Prefer: <Progress aria-label="Uploading file…" />
Indeterminate progress bars must have an aria-label so screen readers can announce what is loading
Example
<Progress value={65} />