Style de la barre de progression dans Bootstrap 5

L'importance d'une barre de progression peut être soulignée par le fait qu'elle maintient votre utilisateur engagé et informé de la progression d'un processus, comme lors du remplissage d'une longue forme qui a plusieurs étapes ou lors du chargement d'une page ou d'une autre source. Ici, dans ce blog, nous avons résumé pour vous des façons dont vous pouvez styliser les barres de progression à l'aide de bootstrap 5. Mais avant de passer à son style, apprenons à en créer un.

Comment créer une barre de progression

Afin de générer une barre de progression, définissez le .progrès classe pour l'élément prédécesseur en attendant, donnez .barre de progression à l'élément successeur, tandis que la largeur de la barre de progression est ajustée à l'aide de la propriété de largeur.

Html

Le parent div a été fourni .classe de progrès alors que l'enfant div a reçu le .classe de progression-barre. Enfin, en utilisant la propriété de largeur, la largeur de la barre de progression a été fixée à 50%.

Sortir

Une barre de progression a été générée avec succès.

Maintenant, apprenons diverses façons dont vous pouvez styliser une barre de progression.

Comment évoluer une barre de progression

Par défaut, une barre de progression a une hauteur 16px ou 1REM mais selon votre préférence, vous pouvez mettre à l'échelle la hauteur de la barre de progression de haut en bas. À cet effet, définissez la même hauteur pour le prédécesseur Div et le successeur div.

Html

Le code ci-dessus générera deux barres de progression, une avec une hauteur de 20px et la seconde avec une hauteur de 40px. Notez que le conteneur de progression et la barre de progression ont été attribués à la même hauteur dans les deux cas.

Sortir

La sortie montre deux barres de progression avec des hauteurs différentes.

Comment étiqueter une barre de progression

Puisque nous savons qu'une barre de progression montre la progression d'un processus, donc, si vous voulez montrer ces progrès en chiffres ou en pourcentage, écrivez simplement un texte à l'intérieur de l'enfant div.

Html

50%

La barre de progression créée dans le code ci-dessus a un label disant «50%». Cette étiquette correspond à la progression du processus.

Sortir

Une étiquette a été affectée avec succès à la barre de progression.

Comment colorer une barre de progression

Si vous souhaitez fournir des couleurs à une barre de progression, affectez simplement les classes de couleurs d'arrière-plan au conteneur de la barre de progression. Les classes de couleur d'arrière-plan sont .bg-primaire, .bg-succès, .bg-secondaire, .bg-info, .bg, .bg-danger, .Bg-Light, .Bg-Dark, .bg.

Html

Ici, nous créons cinq barres de progrès chacune avec une largeur et une couleur différentes.

Sortir

Fournir des couleurs aux barres de progression s'ajoutera à la beauté du site Web.

Comment créer une barre de progression rayée

Une autre chose amusante que vous pouvez faire pour styliser une barre de progression est de la faire rayer et de le faire attribuer le .à rayures de progression classe au conteneur enfant.

Html

Le code ci-dessus générera une barre de progression rayée avec 50% de largeur.

Sortir

C'est ainsi qu'une barre de progression rayée est créée.

Comment animer une barre de progression

L'animation d'une barre de progression fera que les progrès à l'intérieur de la barre semblent bouger. Cela peut être fait en fournissant le .progress-bar-animé classe à la barre de progression avec le .à rayures de progression classe.

Html

Ici, nous créons une barre de progression animée rayée avec 50% de largeur.

Sortir

Une barre de progression animée a été créée.

Comment empiler plusieurs barres de progrès

Si vous souhaitez empiler plusieurs barres de progression ensemble, mettez-les simplement dans le conteneur de progression.

Html

D'abord
Deuxième
Troisième

Le code ci-dessus empilera trois barres de progression chacune avec une largeur différente.

Sortir

La sortie ci-dessus montre trois barres de progression empilées.

Conclusion

Dans Bootstrap 5, une barre de progression peut être créée en attribuant .progrès classe au conteneur parent, et .barre de progression classe au conteneur enfant. Vous évoluez la hauteur d'une barre de progression en attribuant la même hauteur aux conteneurs du parent et des enfants. Une barre de progression peut être étiquetée en plaçant du texte à l'intérieur, en outre, pour créer des barres de progression colorées en utilisant les classes de couleur d'arrière-plan. De plus, vous pouvez créer des barres de progrès rayées et animées .à rayures de progression, et .progress-bar-animé classes respectivement.