Comparaison comportementale
Barre de progression vs Squelette de chargement
Différence décisive
La Barre de progression rapporte la part d’une tâche accomplie ; le Squelette de chargement préfigure la forme du contenu encore en chargement, sans aucune mesure.
Critères de choix, liens et sources
- Barre de progressionChoisis Barre de progression si une tâche a une valeur d’avancement fiable, comme un envoi en octets.Ouvrir la fiche Barre de progression
- Squelette de chargementChoisis Squelette de chargement si une zone de page charge un contenu dont la mise en page est connue à l’avance.Ouvrir la fiche Squelette de chargement
Voir les neuf dimensionsVoir les sources
Attendre et suivre une progression
Essayer
La durée est-elle inconnue, mesurable ou faut-il préserver la forme du contenu ?
Barre de progression
Contexte commun aux essais
Un espace de travail attend la fin d'un contenu ou d'une opération et ne communique que la progression qu'il peut mesurer honnêtement.
Barre de progression
Mission
Barre de progression - Progress bar
Lancer l'envoi, observer une valeur intermédiaire, annuler, relancer et atteindre l'état terminé.
É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
- L'élément de progression étiqueté expose les octets et le pourcentage pendant le transfert.
- Cas limite
- Si le serveur ne fournit plus de valeurs fiables, l'interface passe honnêtement à un état indéterminé au lieu d'inventer l'avancement.
Squelette de chargement
Mission
Aperçu de chargement - Skeleton
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
Progress bar représente l’avancement d’une tâche et expose une valeur mesurée si elle existe ; Spinner est un indicateur d’attente compact, tandis que Skeleton représente la mise en page finale.
Lequel convient à ton besoin ?
Barre de progression
Envoyer un fichier avec un avancement fiable en octets
Squelette de chargement
Charger une fiche ou un article dont la forme est connue
Différence et sources
Progress bar représente l’avancement d’une tâche et expose une valeur mesurée si elle existe ; Spinner est un indicateur d’attente compact, tandis que Skeleton représente la mise en page finale.
Consulter les sourcesParties 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.
Libellé
Le texte persistant qui nomme un contrôle ou un champ.
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
Barre de progression
Envoyer un fichier avec un avancement fiable en octets
Squelette de chargement
Charger une fiche ou un article dont la forme est connue
- Interactivité
Barre de progression
Généralement en lecture seule ; sa valeur et son libellé évoluent avec l’avancement mesurable.
Squelette de chargement
Non interactif et non focalisable ; les vrais contrôles ne le remplacent qu’une fois prêts.
- Rôle accessible
Barre de progression
progress
Squelette de chargement
[aria-hidden=true] + [aria-busy=true]
Neuf dimensions
- Déclenchement
Barre de progression
Une tâche mesurable commence et indique l’avancement par rapport au total.
Squelette de chargement
Le chargement initial commence alors que la mise en page attendue est déjà connue.
- Modalité
Barre de progression
État de progression non modal ; le blocage appartient à la tâche environnante, pas à la barre.
Squelette de chargement
Espace réservé non modal ; les régions non concernées restent utilisables.
- Positionnement
Barre de progression
À côté de la tâche, du fichier ou de l’étape dont elle représente la progression.
Squelette de chargement
Occupe la même mise en page responsive et les mêmes dimensions que le contenu à venir.
- Interactivité
Barre de progression
Généralement en lecture seule ; sa valeur et son libellé évoluent avec l’avancement mesurable.
Squelette de chargement
Non interactif et non focalisable ; les vrais contrôles ne le remplacent qu’une fois prêts.
- Focus
Barre de progression
L'indicateur ne reçoit pas le focus ; celui-ci reste sur les contrôles de l'opération ou la tâche actuelle.
Squelette de chargement
Le focus reste sur la page existante ; remplacer les substituts ne le réordonne ni ne le vole.
- Fermeture
Barre de progression
Il se termine seulement après réussite, échec ou annulation explicite et est remplacé par l'état final correspondant.
Squelette de chargement
Les squelettes disparaissent seulement au profit du contenu, d'un état vide ou d'une erreur avec action.
- Rôle accessible
Barre de progression
progress
Squelette de chargement
[aria-hidden=true] + [aria-busy=true]
- Cas d’usage
Barre de progression
Envoyer un fichier avec un avancement fiable en octets
Squelette de chargement
Charger une fiche ou un article dont la forme est connue
- Comportement mobile
Barre de progression
Utiliser la largeur disponible et garder le libellé ou la valeur lisible sans minuscule superposition.
Squelette de chargement
Reproduire la géométrie mobile du contenu pour éviter un saut lors du remplacement.
| Dimension | Barre de progressionProgress bar | Squelette de chargementSkeleton |
|---|---|---|
| Déclenchement | Une tâche mesurable commence et indique l’avancement par rapport au total. | Le chargement initial commence alors que la mise en page attendue est déjà connue. |
| Modalité | État de progression non modal ; le blocage appartient à la tâche environnante, pas à la barre. | Espace réservé non modal ; les régions non concernées restent utilisables. |
| Positionnement | À côté de la tâche, du fichier ou de l’étape dont elle représente la progression. | Occupe la même mise en page responsive et les mêmes dimensions que le contenu à venir. |
| Interactivité | Généralement en lecture seule ; sa valeur et son libellé évoluent avec l’avancement mesurable. | Non interactif et non focalisable ; les vrais contrôles ne le remplacent qu’une fois prêts. |
| Focus | L'indicateur ne reçoit pas le focus ; celui-ci reste sur les contrôles de l'opération ou la tâche actuelle. | Le focus reste sur la page existante ; remplacer les substituts ne le réordonne ni ne le vole. |
| Fermeture | Il se termine seulement après réussite, échec ou annulation explicite et est remplacé par l'état final correspondant. | Les squelettes disparaissent seulement au profit du contenu, d'un état vide ou d'une erreur avec action. |
| Rôle accessible | progress | [aria-hidden=true] + [aria-busy=true] |
| Cas d’usage | Envoyer un fichier avec un avancement fiable en octets | Charger une fiche ou un article dont la forme est connue |
| Comportement mobile | Utiliser la largeur disponible et garder le libellé ou la valeur lisible sans minuscule superposition. | Reproduire la géométrie mobile du contenu pour éviter un saut lors du remplacement. |