Progress bar
The progress bar displays the current status of a multi-step task. It is usually updated continuously as the task progresses and shows the level of completeness.
Sample
Usage
When and how to use it
Use a progress bar to display completeness of a multi-step task. Completeness is often shown as a percentage or number completed out of a total number of steps.
Steps can include uploading files or submitting an application.
How not to use it
Do not use the progress bar to display progress of unrelated tasks.
Accessibility
Standard accessibility review
Each time a new component version is published:
- Test with the axe accessibility tool
- Review with the VoiceOver or NVDA screen reader
- Ensure all actionable elements are accessible by keyboard command and tab in a logical order
- Check the component layout on a variety of screen sizes