Aller au contenu
SkillCodex
Menu

Progress bar

Barre de progression

Un indicateur visuel et sémantique d’avancement : il expose une valeur dans une plage connue quand elle est mesurable et reste indéterminé sans valeur fiable.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : montrer la part de l'envoi terminéeune barre qui se remplit de zéro à centsuivre un import dont la progression est connue

Toutes les formulations
Enregistrer et partager

Reconnaître

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é.

0/20 Mo, 0 %

Résultat de l’essai

L'envoi n'a pas commencé.

É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.

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

Indicateur d'attente

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

Quel composant utilises-tu ici ?
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 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.

    Libellé

    Le texte persistant qui nomme un contrôle ou un champ.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Attendre et suivre une progression

      Barre de progression appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Indicateur d'attente

      Choisis Barre de progression si tu connais une valeur fiable, comme des octets envoyés ou des étapes terminées. Choisis Indicateur d’attente si l’opération est courte et sans valeur d’avancement utile.

      Comparer cette paire
    • Ne pas confondre

      Squelette de chargement

      Choisis Barre de progression si une tâche a une valeur d’avancement fiable, comme un envoi en octets. Choisis Squelette de chargement si une zone de page charge un contenu dont la mise en page est connue à l’avance.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    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

    Choisir

    À 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

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Lance une opération dont l’avancement est mesurable et compare la valeur affichée au texte de progression.

      Résultat attendu

      La valeur, l’échelle et le nom de l’opération correspondent ; le pourcentage représente un avancement réel plutôt qu’un décor qui avance.

    2. 2. À faire

      Utilise la commande séparée pour annuler ou recommencer si elle existe, puis laisse un essai se terminer.

      Résultat attendu

      Les états annulé, en cours et terminé se distinguent, et la barre elle-même ne devient pas un arrêt au clavier.

    3. 3. À faire

      Essaie une opération dont le total ou l’avancement restant est inconnu.

      Résultat attendu

      L’interface utilise un état indéterminé explicite au lieu d’inventer une valeur numérique ou d’annoncer une fin.

    Contrat complet
    1. 1Le minimum, le maximum et la valeur actuelle sont réels
    2. 2Un libellé visible ou accessible nomme l'opération
    3. 3Les mises à jour restent compréhensibles
    4. 4Réussite, échec et annulation ont des états finaux

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Barre de progression sans casser son comportement

    # Implémenter Barre de progression dans ton agent
    
    ## Objectif
    Implémente Barre de progression pour ce comportement vérifié : Un indicateur visuel et sémantique d’avancement : il expose une valeur dans une plage connue quand elle est mesurable et reste indéterminé sans valeur fiable.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme que Barre de progression répond au besoin avant de coder.
    
    ## Comportement requis
    - La valeur actuelle progresse entre un minimum et un maximum connus sans annonces excessives.
    - La région de contenu expose son état occupé tandis que l’indicateur visuel reste redondant.
    
    ## États à couvrir
    - Envoi au repos
    - Envoi avec progression mesurée
    - Envoi sans estimation fiable
    - Envoi annulé
    - Envoi terminé
    
    ## Accessibilité
    - Rôle ARIA : progress
    - Le contrôle principal ou la région nommée pour Barre de progression 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.
    - L’indicateur ne reçoit pas le focus ; celui-ci reste sur les contrôles de l’opération ou la tâche actuelle.
    - Il se termine seulement après réussite, échec ou annulation explicite et est remplacé par l’état final correspondant.
    - Le nom accessible et la valeur actuelle sont exposés ; les annonces sont espacées pour éviter chaque petite mise à jour.
    - Tab ignore la barre non interactive
    - Tab atteint l’action Annuler distincte lorsqu’elle existe
    
    ## Quand ne pas utiliser
    - La valeur est devinée ou saute de façon imprévisible
    - Seule la forme du contenu compte, pas l’avancement
    
    ## Critères d’acceptation
    - Le minimum, le maximum et la valeur actuelle sont réels
    - Un libellé visible ou accessible nomme l’opération
    - Les mises à jour restent compréhensibles
    - Réussite, échec et annulation ont des états finaux
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Barre de progression sur un parcours réel

    # Vérifier Barre de progression après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Barre de progression au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:7261a0d71540d52b1c2928cd6030b6c22021f0654089c35de8c7c02e415caf1e

    Diagnostiquer un problème

    Trouve et corrige le défaut de Barre de progression

    # Déboguer Barre de progression dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés de Barre de progression.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Le minimum, le maximum et la valeur actuelle sont réels
    - Un libellé visible ou accessible nomme l’opération
    - Les mises à jour restent compréhensibles
    - Réussite, échec et annulation ont des états finaux
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction de Barre de progression

    # Empêcher la régression de Barre de progression
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Barre de progression aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:f95f920c7e2683d0d10f7db11306d580a3276873b006e11f0b81f53bf8596a7f

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:8271bf283fb46259456dc1ec09c7664d99164262ab3a5336048846c2346e56cc

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    progress

    NatifUtilise progress quand une valeur courante et un maximum sont pertinents ; l’absence de valeur représente une progression indéterminée.

    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.

    Signaux visuels

    • Piste avec valeur remplie proportionnelle
    • Pourcentage ou étape textuelle facultative
    • Placement stable près de l'opération

    Signaux comportementaux

    • La valeur évolue entre minimum et maximum connus
    • Les mises à jour sont limitées pour rester compréhensibles
    • La fin mène à un état final clair

    Accessibilité

    Rôle
    progress
    Nom accessible
    Le contrôle principal ou la région nommée pour Barre de progression 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 clavier
    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.
    Défilement
    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

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • 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
      sourceId
      source-ui-html-progress
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Utilise progress quand une valeur courante et un maximum sont pertinents ; l’absence de valeur représente une progression indéterminée.

      Vérifier la source du binding

    Sources

    • WHATWG HTML: The progress element
      sourceId
      source-ui-html-progress
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
      status
      verified

      Affirmation couverte : Barre de progression : sémantique native normative, états, attributs et comportement du navigateur pour progress.

    • WCAG 2.2: Status Messages
      sourceId
      source-ui-wcag-understanding-status-messages
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:cf2a8c16b20c1a94164c9a37e2b3f15d9a7d3f47d88385d47432d6a29655609e
      status
      verified

      Affirmation couverte : Barre de progression : guide WCAG informatif sur les messages d'état annoncés sans déplacer le focus.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Barre de progression : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

    • WAI-ARIA 1.2: aria-busy
      sourceId
      source-ui-wai-aria-busy
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#aria-busy
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Barre de progression : l'état normatif aria-busy pour exposer une région pendant la mise à jour de son contenu.

    • WAI-ARIA 1.2: Live Region Attributes
      sourceId
      source-ui-wai-aria-live-regions
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#attrs_liveregions
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Barre de progression : propriétés normatives des régions live pour le comportement d'annonce d'état.