rudless.

Les Spinners Bootstrap

1. Objectifs

• Être capable de travailler avec les spinners Bootstrap 4

2. Présentation

• Les "spinners" Bootstrap peuvent être utilisés pour afficher l’état de chargement dans vos projets.
• Bootstrap Spinner est 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.

3. Les différentes classes pour créer différents styles de "spinner"

Bootstrap fournit différentes classes pour créer différents styles de "spinner" pour afficher l’état de chargement des projets.

• .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>


4. Couleurs du spinner

• Le spinner par défaut utilise currentColor pour son border-color, ce qui signifie que vous pouvez personnaliser la couleur avec des utilitaires de couleur de texte .



5. 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

<!-- 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>

• Exemple:02
Loading…
6. Exemple:03