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>