Progress 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.

This add-on requires the font-size() and vendor mixins, and the $base-font-size variable in order for the SASS or LESS files to compile without modification.

Basic

A basic progress bar contains a green background with optional text.

<div class="progress">
  <span style="width: 25%">25%</span>
</div>

Sizes

There are both a small and large version of the .progress class.

<div class="progress progress-small">
  <span style="width: 50%" class="bg-blue">50%</span>
</div>

<div class="progress progress-large">
  <span style="width: 75%">75%</span>
</div>

Striped & Animated

You can add the class .progress-striped to any progress bar to make it striped. In addition, adding the class .progress-animate will animate the stripes in the progress bar.

<div class="progress progress-striped">
  <span class="bg-yellow" style="width: 70%"></span>
</div>

<div class="progress progress-striped progress-animate">
  <span class="bg-red" style="width: 90%"></span>
</div>

Stacked

You also can stack progress bars by simply adding the class .progress-stacked and nesting multiple <span> tags within your .progress class.

<div class="progress progress-stacked">
  <span style="width: 25%" class="bg-red"></span>
  <span style="width: 25%" class="bg-blue"></span>
  <span style="width: 25%" class="bg-yellow"></span>
  <span style="width: 10%" class="bg-green"></span>
</div>

Download