Bootstrap 5 Progress Bars

Provide graphical feedback on the progress of a process with Bootstrap's progress bars.

Bootstrap provides a component for displaying progress bars on a website. Progress bars are typically used to provide feedback to the user on the progress of a given process or action. Users can visualize instantly how much is complete and how much more there is to go.

Bootstrap doesn't use the HTML progress element for progress bars, to ensure you can stack progress bars, animate them, and place text labels over them.

Default Progress Bar

To create a default progress bar, use the .progress class with a .progress-bar nested inside it.

View Output

Contextual Classes

You can use the contextual classes to provide extra semantics via color.

View Output

Stripes

You can add stripes by adding the .progress-bar-striped class to the .progress-bar element.

View Output

Animated Stripes

You can animate the stripes by adding the .progress-animated class to the .progress element.

View Output