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.



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.


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