Progress Bar | Crossroads Digital Design Kit

Progress Bar

Default

Progress bars are built from the Bootstrap pattern.

<div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>

Color Variations

The DDK supports an array of colors, in addition to the variations offered by Boostrap.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 30%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" style="width: 35%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 40%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width: 45%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-blue" style="width: 50%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-cyan" style="width: 55%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-teal" style="width: 60%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-orange" style="width: 65%;"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-gold" style="width: 70%;"></div>
</div>