Progress Bar

PROGRESS BAR

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%

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%

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%

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)

<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>