Aller au contenu

Composant · Feedback

LoadingState

Stable

Indicateur de chargement inline accompagné d'un libellé, en deux variantes : un spinner qui tourne, ou un squelette animé. Il signale qu'une zone est occupée (aria-busy) et annonce poliment l'attente aux lecteurs d'écran.

Chargement du contenu…
Voir le code (Svelte) 
<LoadingState label="Chargement des composants…" variant="spinner" />
<LoadingState label="Chargement du contenu…" variant="skeleton" />

Quand l'utiliser

  • Indiquer qu'une zone charge des données sans en connaître la durée.
  • Accompagner un libellé court décrivant ce qui charge.
  • Pour une progression chiffrée, utilisez ProgressBar ; pour un retour d'action inline, InlineLoading.

Quand ne pas l'utiliser

  • Pour reproduire la forme du contenu attendu : utilisez SkeletonText.
  • Pour une progression déterminée en pourcentage : utilisez ProgressBar.
  • Pour un chargement très bref (sous ~300 ms) : évitez tout indicateur.

Variantes

La variante spinner (défaut) tourne ; la variante skeleton anime une barre dégradée.

Préparation du squelette

Libellé par défaut

Sans label, l'indicateur affiche « Loading ». Fournissez toujours un libellé explicite.

Anatomie

  • Conteneur (.st-loading, role="status", aria-busy) : enveloppe inline-flex.
  • Indicateur (.st-loading__spinner ou .st-loading__skeleton) : animé, aria-hidden.
  • Libellé (.st-loading__label) : texte visible décrivant le chargement.

Accessibilité

  • Le conteneur a role="status" et aria-busy="true" : l'attente est annoncée poliment.
  • aria-label reprend le libellé fourni par la prop label.
  • L'indicateur visuel est aria-hidden : seul le libellé porte le sens.
  • Fournissez un libellé concret (« Chargement des services ») plutôt que générique.

Lignes directrices

À faire

  • Nommer ce qui charge dans le libellé.
  • Choisir le squelette pour un bloc de contenu, le spinner pour une action.

À éviter

  • Afficher un indicateur pour un délai imperceptible.
  • Laisser le libellé vide ou trop générique.

API

PropTypeDéfautDescription
labelstring"Loading"Libellé visible et aria-label.
variant"spinner" | "skeleton""spinner"Type d'indicateur affiché.
classstringoptionnelClasse(s) sur le conteneur.
Autres attributsHTMLAttributes<HTMLElement>N/APropagés sur le <section> conteneur.

Tokens utilisés

  • --st-component-loadingState-text
  • --st-component-loadingState-track
  • --st-component-loadingState-indicator
  • --st-component-loadingState-radius