Progress Bars

Progress bars are used to show the user's progression toward an end goal or point.

Progress Bars

Used to show progression toward an end goal.

No Value


HTML
<div class="progress-wrap">
  <div class="progress">
    <div class="progress-bar" style="width: 0%;"></div>
  </div>
</div>

Inline Value


HTML
<div class="progress-wrap inline">
  <div class="progress">
    <div class="progress-bar" style="width: 0%;"></div>
  </div>
  <div class="progress-value">0%</div>
</div>
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Bottom


HTML
<div class="progress-wrap bottom">
  <div class="progress">
    <div class="progress-bar" style="width: 0%;"></div>
  </div>
  <div class="progress-value">0%</div>
</div>
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Top Floating


HTML
<div class="progress-wrap floating-top">
  <div class="progress">
    <div class="progress-bar" style="width: 0%;">
      <div class="progress-value">0%</div>
    </div>
  </div>
</div>
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Bottom Floating


HTML
<div class="progress-wrap floating-bottom">
  <div class="progress">
    <div class="progress-bar" style="width: 0%;">
      <div class="progress-value">0%</div>
    </div>
  </div>
</div>
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%