Skip to content

Progress

  • Beta
  • Not reviewed for accessibility

Use progress components to visualize task completion. The Progress class adds a background color and aligns its children horizontally with flexbox. The children (Progress-item) should be individually colored with background utilities and sized with inline width styles in percentages. Overflow is hidden, so children that overflow will be clipped.

Large progress

Large progress bars are slightly taller than the default.

Small progress

Small progress bars are shorter than the default.

Inline progress

For inline progress indicators, use the Progress and d-inline-flex with an inline element such as <span> and add a custom width style:

Accessibility

In cases where it's not possible to describe the progress in text, provide an aria-label attribute that does so:

Progress with multiple values

To show the progress of tasks in multiple states (such as "done", "in progress", and "open"), add the Progress-item class and a distinct background color utility. Then give each one a percentage width proportional to the total number. Children are stacked from left to right, so if your widths add up to 100%, your bars will too. Note that items with very low percentage values might not be visible if they are smaller than 1px in width.

Edit this page on GitHub
7 contributorssimuraijoelhawksleyNikitaITjonrohanBowserinatoryailicolebemis
Last edited by simurai on December 16, 2022