Comparaison comportementale
Barre de progression vs Squelette de chargement
Choisir Barre de progression pour : Envoyer un fichier avec un avancement fiable en octets. Choisir Squelette de chargement pour : Charger une fiche ou un article dont la forme est connue.
| 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 | native progress element | aria-hidden placeholders with aria-busy on the content region |
| 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. |