Les roues de chargement

1. L’objectif ROUE DE CHARGEMENT:Utilisation

Bootstrap nous propose d’utiliser des "roues de chargement", des spinners en anglais. C’est une roue animée qui indique aux utilisateurs qu’il y a une attente en cours. Cela peut être la classique attente d’un chargement, ou toute autre fonctionnalité qui prend un peu de temps.

2. La roue simple ROUE DE CHARGEMENT:Simple

Dans ce premier exemple simple, nous allons insérer une roue de chargement constituée d’un trois quart de cercle qui tourne sur lui-même.

Voici le code utilisé :

<div class="spinner-border" role="status"> 
  <span class="sr-only">Chargement en cours...</span> 
</div> 

Nous avons une simple boîte <div> qui utilise la classe .spinner-border. Dans cette boîte, se trouve un élément <span class="visually-hidden"> nécessaire pour les personnes en situation de handicap.

Voici l’affichage obtenu qui est animé dans le navigateur :

Vous pouvez ajouter des classes pour colorer cette roue :

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