Progress bar
Barre de progression
Un indicateur visuel et sémantique qui montre une valeur d'avancement dans une plage connue.
Avec vos mots
Ce que les gens décrivent
Alias documentés : jauge d'avancement, progression déterminée, progression d'envoi
- montrer la part de l'envoi terminée
- une barre qui se remplit de zéro à cent
- suivre un import dont la progression est connue
- afficher soixante pour cent terminé
- un état mesurable d'installation
- montrer le reste sans roue de chargement
Essayer
Attendre et suivre une progression
Comparer les trois comportements
Scénario comparatif partagé : 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.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Barre de progression
Progress bar exige une valeur mesurable pertinente ; Spinner sert à un avancement inconnu, tandis que Skeleton représente la mise en page finale.
Votre mission
Lancer l'envoi, observer une valeur intermédiaire, annuler, relancer et atteindre l'état terminé.
Cas limite à vérifier
Si le serveur ne fournit plus de valeurs fiables, l'interface passe honnêtement à un état indéterminé au lieu d'inventer l'avancement.
Mission
Barre de progression - Progress bar
Lancer l'envoi, observer une valeur intermédiaire, annuler, relancer et atteindre l'état terminé.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Libellé
Le texte persistant qui nomme un contrôle ou un champ.
À utiliser quand
- Envoyer un fichier avec un avancement fiable en octets
- Terminer une séquence connue d'étapes de traitement
À éviter quand
- La valeur est devinée ou saute de façon imprévisible
- Seule la forme du contenu compte, pas l'avancement
Comparer les concepts proches
Spinner communique une attente indéterminée ; Progress bar montre un avancement mesurable, tandis que Skeleton préfigure le contenu en chargement.
Indicateur d'attenteSkeleton préfigure la forme du contenu ; Spinner communique une attente inconnue de façon compacte, tandis que Progress bar rapporte un avancement mesurable.
Squelette de chargementBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Mettre à jour une progression mesurable
La valeur actuelle progresse entre un minimum et un maximum connus sans annonces excessives.
Marquer la région occupée
La région de contenu expose son état occupé tandis que l'indicateur visuel reste redondant.
États
Envoi au repos
Envoi au repos
Envoi avec progression mesurée
Envoi avec progression mesurée
Envoi sans estimation fiable
Envoi sans estimation fiable
Envoi annulé
Envoi annulé
Envoi terminé
Envoi terminé
Transitions d’état
Envoi au repos → Envoi avec progression mesurée
Démarrer l’envoi initialise l’exemple mesuré à 25 % sur 20 Mo.
Envoi avec progression mesurée → Envoi terminé
Terminer fixe la valeur mesurée à 100 % et annonce la fin de l’envoi.
Envoi avec progression mesurée → Envoi sans estimation fiable
Simuler une estimation indisponible retire la valeur de progression tout en gardant l’envoi actif.
Envoi sans estimation fiable → Envoi avec progression mesurée
Restaurer l’estimation revient à la valeur mesurée conservée.
Envoi avec progression mesurée → Envoi annulé
Annuler arrête l’envoi mesuré et affiche Relancer.
Envoi sans estimation fiable → Envoi annulé
Annuler arrête l’envoi même lorsqu’aucune estimation fiable n’est disponible.
Envoi annulé → Envoi avec progression mesurée
Relancer redémarre l’exemple mesuré à 25 %.
Envoi sans estimation fiable → Envoi terminé
Terminer achève l’envoi et annonce 100 % même après la perte de l’estimation.
Envoi terminé → Envoi au repos
Réinitialiser restaure l’exemple rejouable d’envoi à zéro.
Scénarios de test
- Contexte
- L'envoi d’une vidéo de 20 Mo rapporte les octets transférés et permet l'annulation.
- Mission
- Lancer l'envoi, observer une valeur intermédiaire, annuler, relancer et atteindre l'état terminé.
- État principal
- 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.
Accessibilité
- Role
- native progress element
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- 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.
- Fermeture
- Il se termine seulement après réussite, échec ou annulation explicite et est remplacé par l'état final correspondant.
- Scroll
- Le chargement et le contenu de remplacement réservent assez d'espace pour éviter les sauts de mise en page et conserver la position de défilement.
- Annonce
- Le nom accessible et la valeur actuelle sont exposés ; les annonces sont espacées pour éviter chaque petite mise à jour.
- Clavier
- Tab ignore la barre non interactive
- Tab atteint l'action Annuler distincte lorsqu'elle existe
Bindings
progress
- implementationKind
- native
- nativeElement
- progress
- ariaPattern
- progressbar
- radixPrimitive
- Non applicable
- shadcnRecipe
- Non applicable
- runtimeDependency
- Non applicable
- packageName
- Non applicable
- exportName
- Non applicable
- exactVersion
- Non applicable
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Use a determinate progress element only when a meaningful current value and maximum are known; otherwise expose an indeterminate busy state.
Vérifier la source du binding
Sources
- WHATWG HTML: The progress element
WHATWG · standard · 2026-07-16
Affirmation couverte : Progress bar: native progress value, maximum, determinate state, and indeterminate state semantics.
- WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Affirmation couverte : Progress bar: WCAG status-message requirements used to qualify non-focus-moving announcements.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.