Conseils
Les indicateurs de chargement sont des icônes animées qui indiquent aux utilisateurs qu’un processus système a été lancé. Ils apparaissent au début d’un processus et disparaissent une fois celui-ci terminé.
À faire
- Affichez un seul indicateur de chargement à la fois.
- Ajoutez un indicateur de chargement lorsque le temps d’attente prévu est de deux secondes ou plus.
- Lorsqu’une seule partie de la page charge du nouveau contenu, affichez l’indicateur de chargement dans cette partie de la page.
- Lorsqu’un indicateur de chargement est ajouté à un bouton, assurez-vous que l’indicateur n’apparaît qu’après que l’utilisateur a cliqué sur le bouton.
Pour des raisons d’accessibilité, l’indicateur de chargement doit inclure une balise
role="status" et une balise
.sr-only imbriquée.
Indicateur de chargement
HTML
<div class="gnb-spinner" role="status">
<i class="fa-solid fa-circle-notch fa-spin"></i>
<span class="sr-only">Chargement...</span>
</div>
Dimensions des indicateurs de chargement
Il existe trois options de taille disponibles, en plus de la taille par défaut. Utilisez les petits indicateurs de chargement dans les composants ou les sections de page, et les grands indicateurs de chargement lors du chargement d’applications ou de pages entières.
Petit
HTML
<div class="gnb-spinner-sm" role="status">
<i class="fa-solid fa-circle-notch fa-spin"></i>
<span class="sr-only">Chargement...</span>
</div>
Moyen
HTML
<div class="gnb-spinner-md" role="status">
<i class="fa-solid fa-circle-notch fa-spin"></i>
<span class="sr-only">Chargement...</span>
</div>
Grand
HTML
<div class="gnb-spinner-lg" role="status">
<i class="fa-solid fa-circle-notch fa-spin"></i>
<span class="sr-only">Chargement...</span>
</div>
Indicateur de chargement dans un bouton
Vous pouvez ajouter un indicateur de chargement à l’intérieur d’un bouton pour indiquer qu’une action est en cours de traitement ou de chargement. Vous pouvez aussi remplacer le texte de l’élément d’indicateur de chargement par le texte du bouton, selon les besoins.
HTML
<button type="button" class="gnb-btn">
Chargement <i class="fa-solid fa-circle-notch fa-spin"></i>
</button>