Bootstrap 4 : Spinners

Un spinner est en quelque sorte un utilitaire d'état qui permet d'informer sur l'état de chargement d'une page web, une action, un composant et bien d'autres. Bootstrap 4 permet de gérer facilement les spinners comme nous le verrons au cours de ce chapitre.

Spinner à bordure

Pour créer un spinner à bordure avec Bootstrap 4, il suffit d'appliquer la class .spinner-border

 

 

<div class="spinner-border"></div>

Nous pouvons appliquer différentes couleurs prévues par Bootstrap 4 en ajoutant la class .text-* ou * représente la couleur souhaitée.

 
 
 
 
 
 
 
 
 

 

<div class="spinner-border text-primary"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-muted"></div>          
<div class="spinner-border text-success"></div>
<div class="spinner-border text-light"></div>          
<div class="spinner-border text-danger"></div>          
<div class="spinner-border text-dark"></div>

Il y'a aussi la possibilité de d'avoir un spinner plus petit en ajoutant la class .spinner-border-sm

 

 

<div class="spinner-border spinner-border-sm"></div>

Spinner croissant

Un spinner croissant prend la forme d'un petit cercle qui grandit. On le crée en utilisant la class .spinner-grow

 

 

<div class="spinner-grow"></div>

On peut aussi appliquer les couleurs :

 
 
 
 
 
 
 
 
 

 

<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-muted"></div>          
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-light"></div>          
<div class="spinner-grow text-danger"></div>          
<div class="spinner-grow text-dark"></div>

Et une petite taille : 

 

 

<div class="spinner-grow spinner-grow-sm"></div>

Taille et forme personnalisées

Vous pouvez modifier les spinners avec n'importe quelle taille en modifiant par exemple la largeur et la hauteur : 

 
 

 

<div class="spinner-border" style="width:80px; height:80px"></div>
<div class="spinner-grow" style="width:80px; height:80px"></div>

Si vous ne voulez pas un cercle parfait, vous pouvez juste renseigner soit seulement la largeur ou la hauteur.
Attention, en fonction de la taille par défaut que vous utilisez sur votre site ou application, en renseignant une certaines taille, vous pouvez avoir un cercle parfait.

Avec seulement la largeur :

 
 
 
 

 

<div class="spinner-border" style="width:80px;"></div>
<div class="spinner-grow" style="width:80px;"></div>
<div class="spinner-border" style="width:45px;"></div>
<div class="spinner-grow" style="width:45px;"></div>

Avec seulement la hauteur :

 
 
 
 

 

<div class="spinner-border" style="height:80px;"></div>
<div class="spinner-grow" style="height:80px;"></div>
<div class="spinner-border" style="height:45px;"></div>
<div class="spinner-grow" style="height:45px;"></div>

Avec le spinner à bordure, vous pouvez avoir une autre forme en appliquant un font-size en px, em ou rem :

 
 
 
 
 
 
 
 
 

 

<div class="spinner-border" style="font-size:120px;"></div>
<div class="spinner-border" style="font-size:100px;"></div>
<div class="spinner-border" style="font-size:80px;"></div>
<div class="spinner-border" style="font-size:60px;"></div>
<div class="spinner-border" style="font-size:40px;"></div>
<div class="spinner-border text-primary" style="font-size:4em;"></div>
<div class="spinner-border text-secondary" style="font-size:5em;"></div>
<div class="spinner-border text-info" style="font-size:6em;"></div>
<div class="spinner-border text-warning" style="font-size:7rem;"></div>

Spinner et Button

Les spinners sont intéressants lorsqu'ils sont combinés avec les buttons pour par exemple renseigner un état via un clic. Dans ce cas, le spinner sera appliqué sur une balise span

     

<button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Patientez ...
</button>

<button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
</button>
        
<button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Patientez ...
</button>

 

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2020 Lookman Design, tous droits réservés .