Les roues de chargement

Vous pouvez télécharger le dossier de ces exemples, nommé 08-Interface-12.

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="sr-only"> nécessaire pour les personnes en situation de handicap.

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

images/24C08-001.png

Vous pouvez ajouter des classes pour colorer cette roue :

<div class="spinner-border" role="status"> 
   <span class="sr-only">Chargement en cours...</span> 
</div> 
<div class="spinner-border text-primary" role="status"> 
   <span class="sr-only">Chargement...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les fenêtres modales
Suivant
Les notifications