Simple Progress Bar

This is a very basic, css-only progress bar that makes use of the utilities of the USWDS. The different portions are set by using basic width percentages in the style attribute.

scss

Basic Red and Green

See the Pen Basic Progress Bar by Stephen Walker (@stphnwlkr) on CodePen.

Striped with border radius

60% Complete
40% Incomplete


<div class="progress radius-md">

<div class="progress-bar progress-bar__striped bg-primary text-middle" style="width:60%">
<span class="text-tabular text-white text-bold">60% Complete</span>
</div>
<div class="progress-bar bg-primary-light" style="width:40%">
<span class="text-tabular no-shadow text-bold ">40% Incomplete</span>
</div>
</div>

Striped with barber pole animation and border radius

This has some limitation on smaller screens or in smaller columns. Future enhancements would include a more responsive solution and possibly additional animation.

60% Complete
20% Partial
20% Incomplete


<div class="progress radius-lg">

<div class="progress-bar progress-bar__striped progress-bar__animated bg-primary text-middle" style="width:60%">
<span class="text-tabular text-white text-bold">60% Complete</span>
</div>
<div class="progress-bar bg-accent-warm-dark progress-bar__striped progress-bar__animated" style="width:20%">
<span class="text-tabular text-white text-bold ">20% Partial</span>
</div>
<div class="progress-bar bg-primary-lighter" style="width:20%">
<span class="text-tabular text-bold ">20% Incomplete</span>
</div>
</div>

Page content was last updated: Sunday, October 28, 2018