Loaders (Indicateurs de chargement)
Les loaders sont des animations en boucle qui indiquent à l’utilisateur qu’un contenu est en cours de chargement. SipaUI propose comme indicateur de chargement un spinner, c’est à dire un objet tournant en boucle.
Usage
- Le loader doit être utilisé pour des activités courtes : entre 2 et 5 secondes.
- Sa progression n’est pas précisément détectable ou il n’est pas nécessaire d’indiquer la durée d’une activité.
- Le loader disparaît à la fin de l’activité en cours.
- Lorsque le loader est au-dessus de contenu (sur une page ou dans un bloc), un voile couvre l’ensemble de cette zone.
Bonnes pratiques
- Un seul loader par page est suffisant.
- Si le temps d’attente est supérieure à 5 secondes, privilégier d’autres méthodes de communication. Par exemple, un message fait patienter l’utilisateur afin qu’il ne quitte pas la page.
Style & code
Dépendances :
- Classe
sipaui
sur un parent (par exemple le<body>
), - Helpers (classes d’aide).
Chargeur seul
Un simple <div>
avec la classe su-loader
.
<div class="su-loader" role="alert">
<span class="su-visually-hidden">Chargement en cours…</span>
</div>
Chargeur dans un bloc
Le loader est affiché avec un voile blanc et est positionné en absolute afin qu’il prenne toute la taille du bloc (qui doit être en relative). Il doit être inclus dans un <div>
comportant la classe su-bloc-loader
qui a un z-index de 10000.
<p class="su-margin-bottom-m">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<section class="su-relative su-standard-border su-standard-padding">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="su-bloc-loader">
<div class="su-loader" role="alert">
<span class="su-visually-hidden">Chargement en cours…</span>
</div>
</div>
</section>
Chargeur dans une page
Le loader est affiché avec un voile blanc et est positionné en fixed. Il sera donc affiché par-dessus toute la page et ne sera pas sensible au scroll (attention, la page derrière reste scrollable). Il doit être inclus dans un <div>
comportant la classe su-page-loader
qui a un z-index de 10000.
<p class="su-margin-bottom-m">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="page-loader" class="su-page-loader su-hidden">
<div class="su-loader" role="alert">
<span class="su-visually-hidden">Chargement en cours…</span>
</div>
</div>
<button class="su-button su-primary su-small" data-sutoggleclass='{"sel":"#page-loader","klass":"su-hidden"}'>Afficher</button>
Accessibilité
Pour rendre cet indicateur de chargement accessible, il faut lui attribuer un role
aria de type alert
et ajouter un texte explicatif qui sera masqué avec la classe su-visually-hidden
issue des classes d’aide (Helpers).
Liste des classes disponibles
su-loader
su-bloc-loader
su-page-loader
Classes annexes
su-visually-hidden
(dépendant des Helpers (classes d’aide))