<!--
data-color = animated bar color
data-trackcolor = track color
data-size = width
data-percent = bar percent
data-width = bar thick
data-animate = animate time im ms (1000ms = 1s)
-->
<!-- Icon -->
<div class="piechart" data-color="#337AB7" data-trackcolor="rgba(0,0,0,0.04)" data-size="150" data-percent="45" data-width="2" data-animate="3000">
<i class="fa fa-facebook"></i>
</div>
<!-- Text -->
<div class="piechart" data-color="#F0AD4E" data-trackcolor="rgba(0,0,0,0.04)" data-size="150" data-percent="66" data-width="2" data-animate="3000">
<span>Hello World</span>
</div>
<!-- Counter -->
<div class="piechart" data-color="#D9534F" data-trackcolor="rgba(0,0,0,0.04)" data-size="150" data-percent="66" data-width="10" data-animate="1700">
<span class="fs-30">
<span class="countTo" data-speed="1700">66</span>%
</span>
</div>
Default Progress Bar
<div class="progress">
<div class="progress-bar"" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Progress Bar With Label
<div class="progress">
<div class="progress-bar"" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
70%
</div>
</div>
Contextual Alternatives
<!-- Primary -->
<div class="progress">
<div class="progress-bar bg-primary"" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
</div>
</div>
<!-- Success -->
<div class="progress">
<div class="progress-bar bg-success"" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
</div>
</div>
<!-- Info -->
<div class="progress">
<div class="progress-bar bg-info"" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
</div>
</div>
<!-- Warning -->
<div class="progress">
<div class="progress-bar bg-warning"" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
</div>
</div>
<!-- Danger -->
<div class="progress">
<div class="progress-bar bg-danger"" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
</div>
</div>
Stripped
<!-- Primary -->
<div class="progress progress-stripped">
<div class="progress-bar bg-primary progress-bar-striped"" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
</div>
</div>
<!-- Success -->
<div class="progress progress-stripped">
<div class="progress-bar bg-success progress-bar-striped"" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
</div>
</div>
<!-- Info -->
<div class="progress progress-stripped">
<div class="progress-bar bg-info progress-bar-striped"" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
</div>
</div>
<!-- Warning -->
<div class="progress progress-stripped">
<div class="progress-bar bg-warning progress-bar-striped"" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
</div>
</div>
<!-- Danger -->
<div class="progress progress-stripped">
<div class="progress-bar bg-danger progress-bar-striped"" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
</div>
</div>
Animated
<!-- Primary -->
<div class="progress">
<div class="progress-bar bg-primary progress-bar-striped progress-bar-animated"" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
</div>
</div>
<!-- Success -->
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated"" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
</div>
</div>
<!-- Info -->
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated"" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
</div>
</div>
<!-- Warning -->
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated"" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
</div>
</div>
<!-- Danger -->
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated"" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
</div>
</div>
Multiple
<div class="progress">
<div class="progress-bar bg-success" style="width: 35%"></div>
<div class="progress-bar bg-warning" style="width: 20%"></div>
<div class="progress-bar bg-danger" style="width: 10%"></div>
</div>
Size
<div class="progress h-2">
<div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
<div class="progress h-5">
<div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
<div class="progress h-8"">
<div class="progress-bar bg-primary" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
<div class="progress h-20"">
<div class="progress-bar bg-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
<div class="progress h-30"">
<div class="progress-bar bg-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
<div class="progress h-50"">
<div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
