Skip to content
KolayCSS

Progress

Progress bars show how far a task has come. The width is set inline on the bar.

Live demo

Basic with label

75%

Colored

Done

Striped

40%

Multiple segments

Code

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

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

Tip: add text inside the bar (e.g. 75%) and add .progress-bar-striped for stripes.