Les Spinners Bootstrap
Les Spinners Bootstrap
-
Objectifs
- Être capable de travailler avec les spinners Bootstrap 4
-
Présentation
- Les
"spinners"Bootstrap peuvent être utilisés pour afficher l’état de chargement dans vos projets. Bootstrap Spinnerest utilisé pour afficher l’état de chargement (loading state) d’une application ou de tout autre processus.- Les
"spinners"Bootstrap sont construits uniquement avec HTML et CSS, ce qui signifie que vous n’avez pas besoin de JavaScript pour les créer. -
Les différentes classes pour créer différents styles de "spinner"
-
.spinner-border
- Pour créer un "spinner" léger à bord en doit utiliser la classe
.spinner-border. - Syntaxe:
<div class = "spinner-border" role = "status">
<span class = "sr-only"> Chargement </span>
</div>-
.spinner-grow
- Pour créer un "spinner" en croissanceen doit utiliser la classe de bootstrap
.spinner-grow. Il s’affiche au fur et à mesure de sa croissance. - Syntaxe:
<div class = "spinner-grow" role = "status">
<span class = "sr-only"> Chargement </span>
</div>
-
Couleurs du spinner
- Le spinner par défaut utilise
currentColorpour sonborder-color, ce qui signifie que vous pouvez personnaliser la couleur avec des utilitaires de couleur de texte . -
Utilisation de Spinners dans les boutons
- On peut utiliser les spinners dans les boutons pour indiquer qu’une action est en cours de traitement.
- Exemple:01
- Exemple:02
- Exemple:03
-
Bootstrap fournit différentes classes pour créer différents styles de "spinner" pour afficher l’état de chargement des projets.
<!-- Border spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
<!-- Growing spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading...
</button>
Loading…
