Progress

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Examples

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 progress element, ensuring you can stack progress bars, animate them, and place text labels over them.

.progress.primary
75%
.progress.secondary
75%
.progress.red
75%
.progress.green
75%
.progress.blue
75%
.progress.yellow
75%
.progress.white
75%
.progress.black
75%

Also works with .progress-sm class and the markup in the example below.

.progress.progress-sm .primary

Striped

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

.progress.primary .progress-bar-striped
75%
.progress.secondary .progress-bar-striped
75%
.progress.red .progress-bar-striped
75%
.progress.green .progress-bar-striped
75%
.progress.blue .progress-bar-striped
75%
.progress.yellow .progress-bar-striped
75%
.progress.white .progress-bar-striped
75%
.progress.black .progress-bar-striped
75%

Animated

.progress.primary .progress-bar-striped .progress-bar-animated
75%
.progress.secondary .progress-bar-striped .progress-bar-animated
75%
.progress.red .progress-bar-striped .progress-bar-animated
75%
.progress.green .progress-bar-striped .progress-bar-animated
75%
.progress.blue .progress-bar-striped .progress-bar-animated
75%
.progress.yellow .progress-bar-striped .progress-bar-animated
75%
.progress.white .progress-bar-striped .progress-bar-animated
75%
.progress.black .progress-bar-striped .progress-bar-animated
75%