16. Progress Bars

Default

Success

Info

Danger

Warning

<h2>Default</h2>
<div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 20%;"></div>
</div>
<div class="progress progress-anim">
  <div class="progress-bar progress-bar-striped" style="width: 45%"></div>
</div>
<h2>Success</h2>
<div class="progress progress-success">
  <div class="progress-bar" style="width: 60%;"></div>
</div>
<div class="progress progress-success">
  <div class="progress-bar progress-bar-striped" style="width: 20%;"></div>
</div>
<div class="progress progress-success progress-anim">
  <div class="progress-bar progress-bar-striped" style="width: 45%"></div>
</div>
<h2>Info</h2>
<div class="progress progress-info">
  <div class="progress-bar" style="width: 60%;"></div>
</div>
<div class="progress progress-info">
  <div class="progress-bar progress-bar-striped" style="width: 20%;"></div>
</div>
<div class="progress progress-info progress-anim">
  <div class="progress-bar progress-bar-striped" style="width: 45%"></div>
</div>
<h2>Danger</h2>
<div class="progress progress-danger">
  <div class="progress-bar" style="width: 60%;"></div>
</div>
<div class="progress progress-danger">
  <div class="progress-bar progress-bar-striped" style="width: 20%;"></div>
</div>
<div class="progress progress-danger progress-anim">
  <div class="progress-bar progress-bar-striped" style="width: 45%"></div>
</div>
<h2>Warning</h2>
<div class="progress progress-warning">
  <div class="progress-bar" style="width: 60%;"></div>
</div>
<div class="progress progress-warning">
  <div class="progress-bar progress-bar-striped" style="width: 20%;"></div>
</div>
<div class="progress progress-warning progress-anim">
  <div class="progress-bar progress-bar-striped" style="width: 45%"></div>
</div>