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 :

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

Le code a bien été copié !