<h3>Basic</h3>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
<div id="accordion1" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion1">How to use</a></div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
&lt;div class="progress"&gt;
  &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"&gt;
    &lt;span class="sr-only"&gt;60% Complete&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
</div>
</div>
</div>
</div>

<br>

<h3>With label</h3>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>
<div id="accordion11" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse11" data-toggle="collapse" data-parent="#accordion11">How to use</a></div>
<div id="collapse11" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
  &lt;div class="progress"&gt;
    &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"&gt;
      60%
   &lt;/div&gt;
 &lt;/div&gt;
</code>
</pre>
</div>
</div>
</div>
</div>

<br>



<h3>Contextual alternatives</h3>
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>

<div id="accordion4" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseFour" data-toggle="collapse" data-parent="#accordion4">How to use</a></div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>

&lt;div class="progress"&gt;
  &lt;div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"&gt;
    &lt;span class="sr-only"&gt;40% Complete (success)&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress"&gt;
  &lt;div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"&gt;
    &lt;span class="sr-only"&gt;20% Complete&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress"&gt;
  &lt;div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"&gt;
    &lt;span class="sr-only"&gt;60% Complete (warning)&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress"&gt;
  &lt;div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"&gt;
    &lt;span class="sr-only"&gt;80% Complete&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

</code>
</pre>
</div>
</div>
</div>
</div>

<br>

<h3>Striped</h3>

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">How to use</a></div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
&lt;div class="progress progress-striped"&gt;
  &lt;div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"&gt;
    &lt;span class="sr-only"&gt;40% Complete (success)&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress progress-striped"&gt;
  &lt;div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"&gt;
    &lt;span class="sr-only"&gt;20% Complete&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress progress-striped"&gt;
  &lt;div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"&gt;
    &lt;span class="sr-only"&gt;60% Complete (warning)&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress progress-striped"&gt;
  &lt;div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"&gt;
    &lt;span class="sr-only"&gt;80% Complete (danger)&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

</code>
</pre>
</div>
</div>
</div>
</div>

<br>

<h3>Animated</h3>
<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

<div id="accordion3" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion3">How to use</a></div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
&lt;div class="progress progress-striped active"&gt;
  &lt;div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"&gt;
    &lt;span class="sr-only"&gt;45% Complete&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

</code>
</pre>
</div>
</div>
</div>
</div>

<br>

<h3>Stacked</h3>

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

<div id="accordion5" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseFive" data-toggle="collapse" data-parent="#accordion5">How to use</a></div>
<div id="collapseFive" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
&lt;div class="progress"&gt;
  &lt;div class="progress-bar progress-bar-success" style="width: 35%"&gt;
    &lt;span class="sr-only"&gt;35% Complete (success)&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="progress-bar progress-bar-warning" style="width: 20%"&gt;
    &lt;span class="sr-only"&gt;20% Complete (warning)&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="progress-bar progress-bar-danger" style="width: 10%"&gt;
    &lt;span class="sr-only"&gt;10% Complete (danger)&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
</div>
</div>
</div>
</div>