A progress bar indicates a percentage of completion.
- Progress indicator: Solid shape indicating the current percent of completion.
- Track: Background indicating the available space the progress indicator can fill.
When to use
- To represent percentage of completion or progress of an activity, process, or task.
When not to use
- To indicate that content is loading, use a skeleton loader or spinner instead.
- To segment tasks that are related and linear, use a stepper instead.
- Extra small
The progress indicator is a static representation of progress at a given point of time and doesn't animate.
- The progress bar component should be supported by visible text indicating what the bar is for, and the units of progress represented. See Reference for additional considerations.
aria-labelledbycontent should also clarify the purpose of the progress bar.
- Progress bars aren't focusable elements, but they can be accessed with a screen reader's read/browse mode.
- Use the HTML
<progress>element in conjunction with either
- The WAI-ARIA
progressbarrole can also be used.
Although browser support is good for
<progress>, screen readers handle them inconsistently. You may want to consider hiding it from screen readers and relying on visible text instead. For more details, read Scott O'Hara's post, Styles Progress Bar.
Last updated at: