Bootstrap - Barres de progression
Ce chapitre traite des barres de progression Bootstrap. Le but des barres de progression est de montrer que les éléments sont en cours de chargement, en cours ou qu'une action est en cours concernant les éléments de la page.
Les barres de progression utilisent des transitions et des animations CSS3 pour obtenir certains de leurs effets. Ces fonctionnalités ne sont pas prises en charge dans Internet Explorer 9 et versions antérieures ou antérieures de Firefox. Opera 12 ne prend pas en charge les animations.
Barre de progression par défaut
Pour créer une barre de progression de base -
Ajoutez un <div> avec une classe de .progress.
Ensuite, à l'intérieur du <div> ci-dessus, ajoutez un <div> vide avec une classe de .progress-bar.
Ajoutez un attribut de style dont la largeur est exprimée en pourcentage. Dites par exemple, style = "60%"; indique que la barre de progression était à 60%.
Voyons un exemple ci-dessous -
<div class = "progress">
<div class = "progress-bar" role = "progressbar" aria-valuenow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Barre de progression alternative
Pour créer une barre de progression avec différents styles -
Ajoutez un <div> avec une classe de .progress.
Ensuite, à l'intérieur du <div> ci-dessus, ajoutez un <div> vide avec une classe de .progress-bar et classe progress-bar-* où * pourrait être success, info, warning, danger.
Ajoutez un attribut de style dont la largeur est exprimée en pourcentage. Dites par exemple, style = "60%"; indique que la barre de progression était à 60%.
Voyons un exemple ci-dessous -
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Barre de progression rayée
Pour créer une barre de progression par bandes -
Ajoutez un <div> avec une classe de .progress et .progress-striped.
Ensuite, à l'intérieur du <div> ci-dessus, ajoutez un <div> vide avec une classe de .progress-bar et classe progress-bar-* où * pourrait être success, info, warning, danger.
Ajoutez un attribut de style dont la largeur est exprimée en pourcentage. Dites par exemple, style = "60%"; indique que la barre de progression était à 60%.
Voyons un exemple ci-dessous -
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>Barre de progression animée
Pour créer une barre de progression animée -
Ajoutez un <div> avec une classe de .progress et .progress-striped. Ajouter également une classe.active à .progress-striped.
Ensuite, à l'intérieur du <div> ci-dessus, ajoutez un <div> vide avec une classe de .progress-bar.
Ajoutez un attribut de style dont la largeur est exprimée en pourcentage. Dites par exemple, style = "60%"; indique que la barre de progression était à 60%.
Cela animera les bandes de droite à gauche.
Voyons un exemple ci-dessous -
<div class = "progress progress-striped active">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>Barre de progression empilée
Vous pouvez même empiler plusieurs barres de progression. Placez les multiples barres de progression dans le même.progress pour les empiler comme indiqué dans l'exemple suivant -
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>