Progress Bars

A simple way to add a progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.

Building progress bars using our predefined classes is simple, you'll just need to write a <div class="progress"> and inside of that a <span class="meter">. The meter is the element that you can set a width to, either inline or programatically on your own accord. The simplest way to do this is to change the style="width:%" property on the meter, itself.

The class options:
The color classes include: .secondary, .alert or .success
The radius classes include: .radius or .round.
You may also you the grid width classes: .small-# or .large-#