TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer des barres de progression Bootstrap 5 ?

133

Les barres de progression sont utilisées pour présenter les compétences, le pourcentage d’achèvement des projets et à des fins similaires. Bootstrap 5 a différents styles de barres de progression similaires aux versions précédentes. Dans ce didacticiel, explorons davantage chaque type de barres de progression proposées dans Bootstrap 5.

Tutoriel sur les barres de progression Bootstrap 5

  1. Barres de progression HTML5
  2. Barres de progression Bootstrap Classes CSS
  3. Création de barres de progression par défaut
  4. Barres de progression avec différentes couleurs d’arrière-plan
  5. Ajout d’étiquettes dans les barres de progression
  6. Plusieurs barres de progression
  7. Style rayé
  8. Style rayé animé
  9. Réglage de la hauteur

Discutons chaque sujet en détail.

1 barres de progression HTML5

N’oubliez pas que HTML5 a une balise par défaut pour créer des barres de progression horizontales, ce qui est suffisant dans la plupart des cas. Ci-dessous se trouve le bloc de code des barres de progression HTML5.

<progress value="50" max="100">50 %</progress><br /> <progress value="60" max="100">60 %</progress><br /> <progress value="70" max="100">70 %</progress><br /> <progress value="80" max="100">80 %</progress><br />

Cela ressemblera à ci-dessous sur le navigateur :

50 %

60%

70%

80%

Bootstrap n’utilise pas la barre de progression HTML5 et possède son propre style pour le composant de barre de progression.

2 classes CSS utilisées dans les barres de progression Bootstrap

Bootstrap 4 utilise les classes CSS suivantes pour créer des barres de progression :

  • La classe ".progress" est utilisée pour le wrapper externe de la barre de progression. Elle est utilisée pour contenir plusieurs barres de progression dans le wrapper.
  • La classe « .progress-bar » est utilisée pour créer une barre de progression réelle pour afficher le pourcentage de progression.
  • La largeur de chaque barre de progression doit être explicitement définie avec des classes CSS supplémentaires.
  • De plus, vous pouvez ajouter des attributs « rôle » et « aria » à la barre de progression à des fins de lisibilité.
  • "aria-valuenow" est utilisé pour indiquer la valeur de progression actuelle, "aria-valuemin" est la valeur minimale qui est 0 et "aria-valuemax" est la valeur maximale qui est 100.

Créons quelques exemples en utilisant ces classes.

3 barres de progression par défaut

La barre de progression par défaut utilise la couleur principale pour afficher la progression et le gris clair pour l’arrière-plan. Vous trouverez ci-dessous le code permettant de créer cinq barres de progression avec une progression de 0, 25, 50, 75 et 100%.

<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 w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75" role="progressbar" 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>

Cela ressemblera à ci-dessous sur le navigateur :

Comme mentionné ci-dessus, chaque barre de progression doit avoir une largeur explicitement définie pour montrer l’achèvement. Vous pouvez soit utiliser un style en ligne ou des classes utilitaires à cette fin. Nous avons utilisé les classes de dimensionnement utilitaire pour 25 %, 50 % et 75 % avec respectivement w-25, w-50 et w-75. Pour une largeur de 100 %, nous avons utilisé un style en ligne avec « largeur : 100 % ».

N’oubliez pas non plus d’ajouter un saut de ligne manuel entre les barres de progression pour éviter que toutes les barres ne s’affichent sur la même ligne.

4 barres de progression avec arrière-plans

Semblable à de nombreux autres composants, vous pouvez simplement utiliser les classes utilitaires d’arrière-plan pour modifier l’arrière-plan en couleurs succès, avertissement, info, danger, sombre ou secondaire.

<div class="progress"> <div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div> </div> <div class="progress"> <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div> </div> <div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div> </div>

Les barres de progression ressembleront à ci-dessous :

Comment créer des barres de progression Bootstrap 5 ?

Notez que la couleur primaire est la valeur par défaut, vous n’avez donc pas besoin de mentionner si vous souhaitez que la progression soit en couleur primaire. De plus, vous ne pouvez pas utiliser une couleur d’arrière-plan claire car l’arrière-plan de la barre de progression est également de couleur claire.

Vous pouvez utiliser des classes utilitaires d’arrière-plan sur le wrapper de progression externe pour modifier l’arrière-plan de la barre de progression. Par exemple, le code ci-dessous produira la barre de progression avec un arrière-plan de couleur rouge (danger) au lieu de gris clair.

<div class="progress bg-danger"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>

Le résultat ressemblera à ci-dessous sur le navigateur :

Comment créer des barres de progression Bootstrap 5 ?

5 barres de progression avec étiquettes

Si vous souhaitez ajouter les étiquettes à la barre de progression, ajoutez simplement le texte avant la fermeture

tag de chaque barre de progression. Vous trouverez ci-dessous un exemple montrant un achèvement à 75 % :

<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div> </div>

L’étiquette sera affichée en haut de la barre avec un alignement central comme ci-dessous :

Comment créer des barres de progression Bootstrap 5 ?

6 barres de progression multiples

L’ajout de plusieurs barres de progression dans un seul emballage extérieur créera toutes les barres sur une seule ligne.

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> </div>

Les multiples barres de progression ressembleront à ci-dessous :

Comment créer des barres de progression Bootstrap 5 ?

7 barres de progression rayées

La classe ".progress-bar-striped" est utilisée pour créer des barres de progression rayées (la classe utilitaire d’arrière-plan est utilisée pour afficher différentes couleurs).

<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</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">100%</div> </div>

Les barres de progression rayées devraient ressembler à ci-dessous :

Comment créer des barres de progression Bootstrap 5 ?

8 barres de progression à rayures animées

La dernière option consiste à animer la bande à l’aide de la classe ".progress-bar-animated".

<div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div> </div>

Cela créera une barre de progression animée avec des rayures vertes. N’oubliez pas que vous ne pouvez animer que les barres rayées et non celles par défaut.

9 Modification de la hauteur ou de l’épaisseur des barres de progression

Par défaut, les barres de progression auront une hauteur de 1 rem. Vous pouvez modifier la hauteur en utilisant le style en ligne dans la classe ".progress-bar" et l’enveloppe extérieure sera automatiquement alignée en conséquence. Créons deux barres de 0.rem et 30px de hauteur :

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>

Le résultat devrait être comme ci-dessous sur le navigateur :

Comment créer des barres de progression Bootstrap 5 ?

Le problème en changeant la hauteur est que les étiquettes lorsqu’elles sont utilisées ne s’aligneront pas correctement. Encore une fois, vous devez utiliser des styles supplémentaires manuellement pour aligner les étiquettes au centre vertical.


Apprendre Bootstrap 5 (Index )


Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails