2.10Progress Bars

A progress bar can be used to display a percentage of progress out of 100. The only two things driving these progress bars are an outer element with the .progress class as as an inner <span> containing an inline style style="width: __%" where the __ signifies a number under 100.

Thanks to Chris Coyier of CSS Tricks for his tutorial on CSS Progress Bars.

Striped

You can make the progress bar striped by adding the .progress--striped class to the progress bar.

Animated

You can make the progress bar animated by adding the .progress--animate class to the progress bar.

Stacked

You can stack progress bars by adding the .progress--stacked class to the progress bar and nesting <span> tags with their respective widths.