Progress Bar
ProA horizontal bar that visualises the completion percentage of a determinate process. The filled portion grows from left to right as progress increases. Used for file uploads, multi-step workflows, data imports, and any operation where the total work is known. Supports a label, percentage display, and optional colour coding for status changes.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard progress bar with a percentage label. | Use for file uploads, data processing, and any operation with a known total. |
| With Label | Progress bar with a descriptive label above and percentage to the right. | Use when the user needs to know what the progress relates to — "Uploading invoice.pdf". |
| Striped |
Usage Guidelines
Always include role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax.
Use for indeterminate loading when the total is unknown — use Spinner or Loading Dots.
Display the percentage or a descriptive label alongside the bar.
Animate backwards — progress should only move forward.
Update aria-valuenow as progress changes so screen readers announce updates.
Display a progress bar at 0% indefinitely — show it only when progress has started.
Use colour transitions at meaningful thresholds — green below 70%, amber 70-90%, red above 90%.
Code
Design Tokens
Accessibility
- Requires role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax attributes.
- Provide an accessible name via aria-label or aria-labelledby.
- Update aria-valuenow dynamically as progress changes — avoid updating too frequently (throttle to every 5-10%).
- For indeterminate state, omit aria-valuenow but keep role="progressbar".
- Screen readers should announce progress updates without overwhelming the user.