Basic example
60% Complete
<div class="progress">
<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
<span class="sr-only">60% Complete</span>
</div>
</div>
With label
60%
<div class="progress">
<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">60%
</div>
</div>
Low percentages
0%
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar">
0%
</div>
</div>
Low percentages
2%
<div class="progress">
<div style="width: 2%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="2" role="progressbar" class="progress-bar">
2%
</div>
</div>
Contextual alternatives
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress">
<div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div style="width: 20%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div style="width: 80%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger">
<span class="sr-only">80% Complete</span>
</div>
</div>
Striped
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress">
<div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success progress-bar-striped">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div style="width: 20%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info progress-bar-striped">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning progress-bar-striped">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div style="width: 80%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger progress-bar-striped">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Animated
45% Complete
<div class="progress">
<div style="width: 45%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar progress-bar-striped active">
<span class="sr-only">45% Complete</span>
</div>
</div>
Stacked
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<div class="progress">
<div style="width: 35%;" class="progress-bar progress-bar-success">
<span class="sr-only">35% Complete (success)</span>
</div>
<div style="width: 20%;" class="progress-bar progress-bar-warning progress-bar-striped">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div style="width: 10%;" class="progress-bar progress-bar-danger">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Animated Progress Loading
View Code
<div class="progress">
<div class="progress-bar progress-bar-info eds_progressAnimated" style="width: 90%;">
<span class="sr-only">90% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success eds_progressAnimated" style="width: 65%;">
<span class="sr-only">65% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning eds_progressAnimated" style="width: 80%;">
<span class="sr-only">80% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger eds_progressAnimated" style="width: 50%;">
<span class="sr-only">50% Complete</span>
</div>
</div>