Progress bar

A progress bar indicates a percentage of completion.


Loading story...

View in Pajamas UI Kit →


Numbered diagram of progress bar structure
Progress bar structure
  1. Progress indicator: Solid shape indicating the current percent of completion.
  2. 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
  • Small
  • Medium
Add size use cases. Create an issue


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.
  • The aria-label or aria-labelledby content 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 aria-label or aria-labelledby.
  • The WAI-ARIA progressbar role 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: