Indiquer l’état de chargement d’un composant ou d’une page avec les spinners Bootstrap, construits entièrement avec HTML, CSS, et sans JavaScript.
A propos
Les « spinners » Bootstrap peuvent être utilisés pour montrer l’état de chargement dans vos projets. Ils sont construits uniquement avec HTML et CSS, ce qui signifie que vous n’avez pas besoin de JavaScript pour les créer. Vous aurez toutefois besoin de JavaScript personnalisé pour activer leur visibilité. Leur apparence, leur alignement et leur taille peuvent être facilement personnalisés avec nos incroyables classes utilitaires.
Pour des raisons d’accessibilité, chaque chargeur comprend ici role="status" et une <span class="sr-only">Loading...</span> imbriquée.
Spinner de bordure
Utilisez les spinners de bordure pour un indicateur de chargement léger.
<div class="spinner-border" role="status"> <span class="sr-only">Loading...</span></div>Couleurs
Le spinner de bordure utilise currentColor pour son border-color, ce qui signifie que vous pouvez personnaliser la couleur avec les utilitaires de couleur de texte. Vous pouvez utiliser n’importe lequel de nos utilitaires de couleur de texte sur le spinner standard.
Pourquoi ne pas utiliser les utilitaires border-color ? Chaque spinner de bordure spécifie une transparent bordure pour au moins un côté, donc .border-{color} utilitaires remplaceraient cela.
Spinner de croissance
Si vous n’avez pas envie d’un spinner de bordure, passez au spinner de croissance. Bien qu’elle ne tourne pas techniquement, elle grandit de manière répétée !
<div class="spinner-grow" role="status"> <span class="sr-only">Loading...</span></div>Encore une fois, ce spinner est construit avec currentColor, vous pouvez donc facilement changer son apparence avec des utilitaires de couleur de texte. Le voici en bleu, avec les variantes prises en charge.
Alignement
Les spinners dans Bootstrap sont construits avec rems, currentColor, et display: inline-flex. Cela signifie qu’ils peuvent facilement être redimensionnés, recolorés et rapidement alignés.
Marge
Utilisez des utilitaires de marge comme .m-5 pour faciliter l’espacement.
<div class="spinner-border m-5" role="status"> <span class="sr-only">Loading...</span></div>Placement
Utiliser les utilitaires de flexbox, les utilitaires de flottaison ou les utilitaires d’alignement de texte pour placer les spinners exactement où vous en avez besoin dans n’importe quelle situation.
Flex
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div></div>Floats
<div class="clearfix"> <div class="spinner-border float-right" role="status"> <span class="sr-only">Loading...</span> </div></div>Alignement du texte
<div class="text-center"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div></div>Taille
Ajouter .spinner-border-sm et .spinner-grow-sm pour obtenir un spinner plus petit qui peut être utilisé rapidement au sein d’autres composants.
Ou, utilisez un CSS personnalisé ou des styles en ligne pour modifier les dimensions selon vos besoins.
Boutons
Utilisez des spinners dans les boutons pour indiquer qu’une action est en cours de traitement ou se déroule. Vous pouvez également échanger le texte de l’élément spinner et utiliser le texte du bouton selon les besoins.
0 commentaire