Squelette de chargement vs Indicateur d'attente

Le Squelette de chargement réserve la mise en page future pendant le chargement ; l’Indicateur d’attente est un indicateur compact d’un travail de durée inconnue, sans indice de mise en page.

Essayer Squelette de chargement Essayer Indicateur d'attente

Critères de choix, liens et sources

Squelette de chargementChoisis Squelette de chargement si la zone en chargement est grande et que sa forme finale est prévisible, comme une carte ou un article.Ouvrir la fiche Squelette de chargement
Indicateur d'attenteChoisis Indicateur d’attente si l’attente est courte ou la zone petite, comme à l’intérieur d’un bouton.Ouvrir la fiche Indicateur d'attente

Voir les neuf dimensions Voir les sources

Squelette de chargement

Comparer les trois géométries réservées avec les profils chargés, simuler l’échec d’une carte et la réessayer.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite

À observer: Trois espaces réservés décoratifs reprennent approximativement la grille des profils pendant que le répertoire expose son état occupé.
Cas limite: Une carte en échec devient une vraie erreur textuelle avec Réessayer au lieu de rester un squelette infini.

Ce que cet essai montre

Skeleton préfigure la forme du contenu ; Spinner communique une attente inconnue de façon compacte, tandis que Progress bar rapporte un avancement mesurable.

Utiliser le Pack — Squelette de chargement

Lequel convient à ton besoin ?

Squelette de chargement

Charger une fiche ou un article dont la forme est connue

Indicateur d'attente

Une courte opération n'a pas de valeur d'avancement utile

Quel composant utilises-tu ici ?Utiliser Squelette de chargementUtiliser Indicateur d'attente

Lire le Pack complet Vérifier le résultat

Différence et sources

Skeleton préfigure la forme du contenu ; Spinner communique une attente inconnue de façon compacte, tandis que Progress bar rapporte un avancement mesurable.

Consulter les sources

Parties du spécimen

Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

Surface

Le conteneur visible qui accueille le contenu du composant.

Décision

Question de famille

La durée est-elle inconnue, mesurable ou faut-il préserver la forme du contenu ?

Trois critères pour choisir

Cas d’usage: Squelette de chargement
Charger une fiche ou un article dont la forme est connue
Indicateur d'attente
Une courte opération n'a pas de valeur d'avancement utile
Interactivité: Squelette de chargement
Non interactif et non focalisable ; les vrais contrôles ne le remplacent qu’une fois prêts.
Indicateur d'attente
Non interactif ; un état accessible indique que le traitement est toujours en cours.
Rôle accessible: Squelette de chargement
[aria-hidden=true] + [aria-busy=true]
Indicateur d'attente
status + [aria-busy=true]

Neuf dimensions

Déclenchement: Squelette de chargement
Le chargement initial commence alors que la mise en page attendue est déjà connue.
Indicateur d'attente
Une opération dont la durée restante est inconnue commence.
Modalité: Squelette de chargement
Espace réservé non modal ; les régions non concernées restent utilisables.
Indicateur d'attente
Indicateur d’état non modal, sauf si le parcours environnant bloque lui-même l’interaction.
Positionnement: Squelette de chargement
Occupe la même mise en page responsive et les mêmes dimensions que le contenu à venir.
Indicateur d'attente
Près de la région ou du contrôle concerné, sans remplacer le contenu sans rapport.
Interactivité: Squelette de chargement
Non interactif et non focalisable ; les vrais contrôles ne le remplacent qu’une fois prêts.
Indicateur d'attente
Non interactif ; un état accessible indique que le traitement est toujours en cours.
Focus: Squelette de chargement
Le focus reste sur la page existante ; remplacer les substituts ne le réordonne ni ne le vole.
Indicateur d'attente
Le focus reste sur le contrôle initiateur sauf si une transition documentée remplace toute la vue.
Fermeture: Squelette de chargement
Les squelettes disparaissent seulement au profit du contenu, d'un état vide ou d'une erreur avec action.
Indicateur d'attente
L'indicateur s'arrête lorsque le travail se termine ou est annulé ; il n'est jamais un message à fermer manuellement.
Rôle accessible: Squelette de chargement
[aria-hidden=true] + [aria-busy=true]
Indicateur d'attente
status + [aria-busy=true]
Cas d’usage: Squelette de chargement
Charger une fiche ou un article dont la forme est connue
Indicateur d'attente
Une courte opération n'a pas de valeur d'avancement utile
Comportement mobile: Squelette de chargement
Reproduire la géométrie mobile du contenu pour éviter un saut lors du remplacement.
Indicateur d'attente
Réserver un espace stable et accompagner l’indicateur d’un bref état textuel lorsque l’attente est perceptible.

Dimension	Squelette de chargementSkeleton	Indicateur d'attenteSpinner
Déclenchement	Le chargement initial commence alors que la mise en page attendue est déjà connue.	Une opération dont la durée restante est inconnue commence.
Modalité	Espace réservé non modal ; les régions non concernées restent utilisables.	Indicateur d’état non modal, sauf si le parcours environnant bloque lui-même l’interaction.
Positionnement	Occupe la même mise en page responsive et les mêmes dimensions que le contenu à venir.	Près de la région ou du contrôle concerné, sans remplacer le contenu sans rapport.
Interactivité	Non interactif et non focalisable ; les vrais contrôles ne le remplacent qu’une fois prêts.	Non interactif ; un état accessible indique que le traitement est toujours en cours.
Focus	Le focus reste sur la page existante ; remplacer les substituts ne le réordonne ni ne le vole.	Le focus reste sur le contrôle initiateur sauf si une transition documentée remplace toute la vue.
Fermeture	Les squelettes disparaissent seulement au profit du contenu, d'un état vide ou d'une erreur avec action.	L'indicateur s'arrête lorsque le travail se termine ou est annulé ; il n'est jamais un message à fermer manuellement.
Rôle accessible	[aria-hidden=true] + [aria-busy=true]	status + [aria-busy=true]
Cas d’usage	Charger une fiche ou un article dont la forme est connue	Une courte opération n'a pas de valeur d'avancement utile
Comportement mobile	Reproduire la géométrie mobile du contenu pour éviter un saut lors du remplacement.	Réserver un espace stable et accompagner l’indicateur d’un bref état textuel lorsque l’attente est perceptible.

Attendre et suivre une progression

Squelette de chargement

Indicateur d'attente

Ce que cet essai montre

Lequel convient à ton besoin ?

Squelette de chargement

Indicateur d'attente

Parties du spécimen

Question de famille

Trois critères pour choisir

Neuf dimensions