Search
× Search
lundi 24 avril 2017
AccueilDraftFeaturesTypographyProgress Bar

Progress Bar

Typography

PROGRESS BAR

Basic example 60% Complete
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)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
<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)
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
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

90% Complete
65% Complete
80% Complete
50% Complete
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>

Ils nous soutiennent

get social

>Qui sommes-nous ?
>La formation
>Être stagiaire
>Espace entreprises partenaires
>Nous rejoindre


Retour au début