Progress

Progress bars are useful in applicaiton to signal the state of completion of an element. Although you have to manage the JavaScript yourself, the styles are provided to display the progress nicely.

Progress Bar Classes

progress

• progress-bar{-TYP}
  • striped animated

Try it

The progress class the a container class with another item inside that has the progress-bar class.

You should include assistive classes with the following values:

aria-valuenow - The current value.
aria-valuemin - The minimum value
aria-valuemax - The maximum value

Any text you include inside the progress-bar element will be its label. You can also color these with the background color classes and change the color of the text with the text classes as well.

Weirdly enough, you can include more than one progress-bar inside a progress container and they will just appear side by side.

There is one alternate style you can use called progress-bar-striped, which draws diagonal stripes and there is an alternate version of that which animates the stripes as well.