Progression
Documentation et exemples d'utilisation des barres de progression personnalisées Bootstrap avec prise en charge des barres empilées, des arrière-plans animés et des étiquettes de texte.
Comment ça fonctionne
Les composants de progression sont construits avec deux éléments HTML, du CSS pour définir la largeur et quelques attributs. Nous n'utilisons pas l' le HTML5 <progress>
element, ce qui vous permet d'empiler les barres de progression, de les animer et de placer des étiquettes de texte dessus.
- Nous utilisons le
.progress
comme wrapper pour indiquer la valeur maximale de la barre de progression. - Nous utilisons l'intérieur
.progress-bar
pour indiquer les progrès réalisés jusqu'à présent. - Le
.progress-bar
nécessite un style en ligne, une classe utilitaire ou un CSS personnalisé pour définir leur largeur. - Le
.progress-bar
nécessite également certains attributsrole
etaria
pour le rendre accessible.
Mettez tout cela ensemble, et vous avez les exemples suivants.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Bootstrap fournit une poignée d' utilitaires pour définir width. Selon vos besoins, ceux-ci peuvent vous aider à configurer rapidement la progression.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Etiquettes
Ajoutez des étiquettes à vos barres de progression en plaçant du texte dans le fichier .progress-bar
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Hauteur
Nous définissons uniquement une height
valeur sur le .progress
, donc si vous modifiez cette valeur, l'intérieur .progress-bar
sera automatiquement redimensionné en conséquence.
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Arrière plan
Utilisez les classes utilitaires d'arrière-plan pour modifier l'apparence des barres de progression individuelles.
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Barres multiples
Incluez plusieurs barres de progression dans un composant de progression si vous en avez besoin.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Rayé
Ajouter .progress-bar-striped
à n'importe lequel .progress-bar
pour appliquer une bande via un dégradé CSS sur la couleur d'arrière-plan de la barre de progression.
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Rayures animées
Le dégradé rayé peut également être animé. Ajouter .progress-bar-animated
à .progress-bar
pour animer les rayures de droite à gauche via des animations CSS3.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
Sass
Variables
$progress-height: 1rem;
$progress-font-size: $font-size-base * .75;
$progress-bg: $gray-200;
$progress-border-radius: $border-radius;
$progress-box-shadow: $box-shadow-inset;
$progress-bar-color: $white;
$progress-bar-bg: $primary;
$progress-bar-animation-timing: 1s linear infinite;
$progress-bar-transition: width .6s ease;
Images clé
Utilisé pour créer les animations CSS pour .progress-bar-animated
. Inclus dans scss/_progress-bar.scss
.
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}