Bootstrap - Spinners

Bienvenue, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde passionnant des spinners de Bootstrap. En tant que votre professeur d'informatique bienveillant du coin, je suis là pour vous guider dans ce voyage, étape par étape. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et mettons-nous en route pour ce tutoriel !

Fonctionnement

Les spinners de Bootstrap sont utilisés pour indiquer un état de chargement dans vos applications web. Ils sont comme ces petits cercles tournants que vous voyez lorsqu'un site web charge du contenu. Ces composants ingénieux aident à améliorer l'expérience utilisateur en fournissant une rétroaction visuelle que quelque chose se passe en arrière-plan.

Les spinners Bootstrap sont construits avec HTML, CSS, et une touche de magie JavaScript. Ils utilisent un CSS personnalisé pour créer l'animation de rotation, garantissant un aspect lisse et cohérent sur différents navigateurs et appareils.

Spinner à bordure

Commençons par le spinner le plus basique : le spinner à bordure. Il s'agit du style de spinner par défaut dans Bootstrap.

<div class="spinner-border" role="status">
<span class="visually-hidden">Chargement...</span>
</div>

Dans cet exemple, nous avons un élément div avec deux classes : spinner-border et role="status". La classe spinner-border applique l'animation de rotation, tandis que role="status" aide les lecteurs d'écran à comprendre que ceci est un indicateur d'état.

À l'intérieur du div, nous avons un span avec la classe visually-hidden. Ce texte n'est pas visible à l'écran mais peut être lu par les lecteurs d'écran, améliorant l'accessibilité pour les utilisateurs ayant des déficiences visuelles.

Couleurs

Tout comme un caméléon change de couleur, nos spinners peuvent s'adapter à différents thèmes ! Bootstrap vous permet de personnaliser la couleur de vos spinners en utilisant les utilitaires de couleur du texte.

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Chargement...</span>
</div>

Chaque spinner dans cet exemple a une classe supplémentaire comme text-primary, text-secondary, etc. Ces classes changent la couleur du spinner pour correspondre au schéma de couleurs de Bootstrap.

Spinner croissant

Si les spinners à bordure ne sont pas votre tasse de thé, Bootstrap offre une autre saveur : le spinner croissant. Ce spinner grandit et se rétracte au lieu de tourner.

<div class="spinner-grow" role="status">
<span class="visually-hidden">Chargement...</span>
</div>

La structure est similaire au spinner à bordure, mais nous utilisons la classe spinner-grow au lieu de spinner-border.

Alignement

Aligner les spinners est aussi simple que de manger une tarte avec Bootstrap's utilitaires flexbox. Jetons un coup d'œil à quelques exemples :

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>

<div class="d-flex align-items-center">
<strong>Chargement...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Dans le premier exemple, nous utilisons justify-content-center pour centrer le spinner horizontalement. Dans le second, nous alignons le spinner verticalement avec du texte en utilisant align-items-center.

Marge

Besoin d'un peu d'espace autour de votre spinner ? Les utilitaires de marge de Bootstrap viennent à la rescousse !

<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Chargement...</span>
</div>

La classe m-5 ajoute une marge de taille 5 (ce qui est généralement 3rem) autour de toutes les côtés du spinner.

Placement

Les spinners peuvent être placés à l'intérieur de divers autres éléments. Voici comment vous pouvez mettre un spinner à l'intérieur d'un bouton :

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Chargement...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Chargement...
</button>

Dans ces exemples, nous plaçons le spinner à l'intérieur d'un bouton et utilisons spinner-border-sm pour le rendre plus petit.

Flex

Les utilitaires flexbox peuvent vous aider à créer des layouts plus complexes avec des spinners :

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>

Cela centre le spinner horizontalement dans son conteneur.

Flottaison

Pour les moments où vous avez besoin que votre spinner flotte, les utilitaires de flottaison de Bootstrap sont là pour vous aider :

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>

La classe float-end fait flotter le spinner à droite de son conteneur.

Alignement du texte

Les utilitaires d'alignement du texte peuvent également être utilisés avec des spinners :

<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>

Cela centre le spinner dans son conteneur en utilisant l'alignement du texte.

Taille

Parfois, la taille importe ! Vous pouvez ajuster la taille de vos spinners en utilisant les classes de taille de Bootstrap :

<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Chargement...</span>
</div>

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Chargement...</span>
</div>

Utilisez spinner-border-sm ou spinner-grow-sm pour des spinners plus petits. Pour des tailles personnalisées, vous pouvez utiliser des styles en ligne pour définir des dimensions spécifiques.

Boutons

Pour finir, regardons comment utiliser les spinners à l'intérieur des boutons :

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Chargement...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Chargement...
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Chargement...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Chargement...
</button>

Ces exemples montrent comment intégrer à la fois des spinners à bordure et croissants dans des boutons, avec et sans texte accompagnant.

Et voilà, les amis ! Vous êtes maintenant un expert des spinners Bootstrap. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces composants dans vos projets. Bon codage, et puissent vos pages web toujours tourner avec style !

Méthode	Description
spinner-border	Crée un spinner à bordure tournante
spinner-grow	Crée un spinner croissant et se rétractant
text-[couleur]	Change la couleur du spinner (par exemple, text-primary, text-secondary)
spinner-border-sm	Crée un spinner à bordure plus petit
spinner-grow-sm	Crée un spinner croissant plus petit
m-[taille]	Ajoute une marge autour du spinner (par exemple, m-5)
d-flex	Crée un conteneur flexbox
justify-content-center	Centre le contenu horizontalement dans un conteneur flexbox
align-items-center	Centre le contenu verticalement dans un conteneur flexbox
float-[direction]	Flotte le spinner (par exemple, float-end)
text-center	Centre le spinner en utilisant l'alignement du texte
visually-hidden	Cache le contenu visuellement mais le garde accessible aux lecteurs d'écran

Credits: Image by storyset