Getting started!

Progress Bars

Basic example

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.

Labels

Add labels to your progress bars by placing text within the progress-bar.

25%

Striped example

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

Multiple bars

Include multiple progress bars in a progress component if you need.

Size

Size whatever you want just add class progress sm, md, lg

Colored bars

You can add background classes to progress-bar

Animated bars

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

Vertical bars

Add the class progress-vertical to progress

Vertical bars from bottom

Add the class progress-vertical-bottom to progress

Vertical bars striped

Add the class progress-bar-striped

Size

Size whatever you want just add class progress sm, md, lg