Les barres de progression
Pour créer une barre de progression avec Bootstrap, nous allons déjà devoir ajouter une classe .progress à un élément conteneur (un div, par exemple).
Ensuite, nous ajouterons une classe .progress-bar à un autre élément conteneur enfant pour matérialiser la barre de progression en soi.
Pour finalement définir le taux de remplissage de la barre de progression, c’est-à-dire la taille de la partie colorée de la barre nous allons tout simplement utiliser une propriété CSS width. Pour obtenir une barre remplie à 25%, par exemple, on utilisera width : 25% via un attribut style ou en utilisant la classe .w-25
Pour faciliter l’accessibilité, c’est-à-dire la compréhension de ce composant par les liseuses d’écran, on renseignera également des attributs role et aria.
Code :
See the Pen
Bootstrap 5.3.1 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 5.3.1 by Pierre (@pierregiraud)
on CodePen.
Note : Bien évidemment, ici, nos barres de progression sont statiques (elles ne se remplissent pas au fur et à mesure). Nous nous contentons une nouvelle fois dans ce cours de présenter les composants de Bootstrap, mais ne créons pas de scripts complets utilisant ces composants. Ici, on pourrait utiliser du JavaScript pour faire progresser notre barre en fonction de certains critères (emplacement dans la page, % d’un fichier téléchargé, etc.).
On va également pouvoir modifier simplement les styles de nos barres de progression et notamment la hauteur ou la couleur de fond de nos barres.
Pour modifier la hauteur, il suffit de définir une propriété height pour le conteneur possédant la classe .progress.
Pour modifier la couleur de fond, on ajoutera une classe bg-* à l’élément possédant la classe .progress-bar.
Code :
See the Pen
Bootstrap 5.3.2 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 5.3.2 by Pierre (@pierregiraud)
on CodePen.
On va également pouvoir obtenir des barres de progression zébrées en ajoutant une classe .progress-bar-striped à l’élément possédant la classe .progress-bar.
Pour animer les zébrures, on pourra encore rajouter une classe .progress-bar-animated.
Code :
See the Pen
Bootstrap 5.3.3 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 5.3.3 by Pierre (@pierregiraud)
on CodePen.
Les spinners
On va utiliser le composant spinner pour indiquer aux utilisateurs qu’une action est en cours (document en train de charger, etc.).
Pour créer un spinner avec Bootstrap, on va pouvoir utiliser soit la classe .spinner-border soit la classe .spinner-grow en fonction du type d’effet qu’on recherche.
Par défaut, les spinners utilisent la couleur courante. On peut modifier cette couleur en utilisant une classe text-*.
On va inclure un attribut rôle et un message qui ne sera affiché que pour les liseuses d’écran grâce à la classe
Code :
See the Pen
Bootstrap 5.3.4 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 5.3.4 by Pierre (@pierregiraud)
on CodePen.
On va également pouvoir réduire la taille de nos spinners grâce aux classes .spinner-border-sm et .spinner-grow-sm, ce qui va nous permettre d’incorporer nos spinners dans d’autres éléments comme des boutons par exemple.
Code :
See the Pen
Bootstrap 5.3.5 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 5.3.5 by Pierre (@pierregiraud)
on CodePen.
