Progress bare

Basic


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

Striped

How to use


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

Animated

How to use


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

Additional colors

How to use


<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Striped bars

How to use


<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>