Standard Progress Bar
The progress has a very simple HTML structure. The best way to set the width of the progress bar is through an inline width style.
42%
<div class="progress">
<div class="progress-value">42%</div>
<div class="progress-bar" style="width:42%"></div>
</div>
Colors
Add .success-progress, .warning-progress, and .error-progress classes for a few color variations.
75%
50%
25%
<div class="progress success-progress">
<div class="progress-value">75%</div>
<div class="progress-bar" style="width:75%"></div>
</div>
<div class="progress warning-progress">
<div class="progress-value">50%</div>
<div class="progress-bar" style="width:50%"></div>
</div>
<div class="progress error-progress">
<div class="progress-value">25%</div>
<div class="progress-bar" style="width:25%"></div>
</div>
Empty Progress Bar
Add .empty-progress if the value is really low (< 5%) to reverse the value text color.
0%
<div class="progress empty-progress">
<div class="progress-value">0%</div>
<div class="progress-bar" style="width:0%"></div>
</div>
Small Progress Bar
Add .small-progress for a very thin progress bar. There's no need to add the .progress-value in this case.