progress-bars

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 progress element, ensuring you can stack progress bars, animate them, and place text labels over them.

We use the .progress as a wrapper to indicate the max value of the progress bar.
We use the inner .progress-bar to indicate the progress so far.
The .progress-bar requires an inline style, utility class, or custom CSS to set their width.

<div class="progress primary" style="height: 4px;">
  <div class="progress-bar" style="width: 25%;"></div>
</div>

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

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

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

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

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

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

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

Striped Bars

To get stripe on Progress bar simply add .striped class on .progress-bar

50%

<div class="progress primary" style="height: 4px;">
  <div class="progress-bar striped" style="width: 25%;"></div>
</div>

<div class="progress primary">
  <div class="progress-bar striped" style="width: 25%;"></div>
</div>

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

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

Animated Striped Bars

To get animated stripe on Progress bar simply add .striped .animated-stripe class on .progress-bar

50%

<div class="progress primary" style="height: 4px;">
  <div class="progress-bar striped animated-stripe" style="width: 25%;"></div>
</div>

<div class="progress primary">
  <div class="progress-bar striped animated-stripe" style="width: 25%;"></div>
</div>

<div class="progress success">
  <div class="progress-bar striped animated-stripe" style="width: 50%;"></div>
</div>

<div class="progress secondary">
  <div class="progress-bar striped animated-stripe" style="width: 50%;">50%</div>
</div>

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!

progress-bars

How it works

Striped Bars

Animated Striped Bars

Page Content