Effets de chargement Bootstrap5
Pour créer un effet de chargement, vous pouvez utiliser la classe.spinner-border:
Vous pouvez utiliser les classes de couleur du texte pour définir différentes couleurs :
Exemple
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
Essayez-le vous-même »
Effet de chargement clignotant
Utilisez la classe .spinner-grow pour créer un effet de chargement clignotant :
Exemple
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
Essayez-le vous-même »
Définir la taille du spinner
Utilisez les classes .spinner-border-sm ou .spinner-grow-sm pour définir la taille du spinner :
Exemple
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
Essayez-le vous-même »
Bouton de chargement
Nous pouvons également créer un bouton de chargement.
Exemple
<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>
Chargement..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Chargement..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Chargement..
</bouton>
Essayez-le vous-même »