Barre de progression sans attribut — affiche l'état 0 % sans label.
Voir le code
<ar-progressbar></ar-progressbar>Aller à la liste des composantsAller au menu de la page
Import du fichier :
mon-document-a-partager.pdf
CDN npm Attributs et propriétés 1 Slots 1 CSS Parts 6 CSS Custom Properties 3
Sur cette page
Progressbar
AlphaAffiche l'avancement d'une opération en cours sous forme de barre horizontale. À utiliser pour un upload de fichier, un parcours en plusieurs étapes, ou toute tâche à progression mesurable.
role="progressbar",aria-valuenow,aria-valueminetaria-valuemaxposés sur la barre — la progression est vocalisée automatiquement par les lecteurs d’écran (WCAG 4.1.2 (ouvre dans un nouvel onglet)Name, Role, Value : tout composant UI doit exposer son nom, rôle et valeur (états inclus) aux technologies d'assistance. ).- La valeur de
aria-labelledbypointe sur le label slotté, pas sur un texte invisible — le contexte de la progression est toujours visible et vocalisé simultanément.
- Fournir un label explicite dans le slot. Sans slot, la barre n’a pas de contexte — le lecteur d’écran annoncera “75%” sans préciser quoi. Utilisez un texte descriptif (“Chargement du fichier”, “Progression de l’inscription”).
- Mettre à jour
percentau fil de l’avancement. Le composant ne suit pas l’avancement automatiquement — c’est à vous d’incrémenter la valeur au rythme réel de l’opération.
Les exemples de cette page sont affichés avec le thème neutre du starter-kit.
Suivi de l'upload d'un fichier.
mon-document-a-partager.pdf
Voir le code
<ar-progressbar percent="10">
<!-- Contenu au choix -->
Import du fichier : <br role="none" />
<strong title="mon-document-a-partager.pdf">
mon-document-a-partager.pdf
</strong>
</ar-progressbar>Manipulez les attributs pour voir le code et la preview se mettre à jour.
<ar-progressbar></ar-progressbar>Si vous utilisez l'autoloader, les composants détectés dans la pages sont chargés automatiquement, donc pas besoin de les importer individuellement.
Pour un import manuel, voici comment vous y prendre.
Importez ce composant depuis le CDN.
<script type="module" src="https://unpkg.com/@ariane-ui/core/dist/components/progressbar/index.js"></script>Après avoir installé le paquet via npm, vous pouvez importer le composant ainsi :
import '@ariane-ui/core/dist/components/progressbar/index.js';Attributs et propriétés
1 sur 1
percentreflète
Pourcentage de complétion. Automatiquement borné entre 0 et 100.
Slots
1 sur 1(default)
Label décrivant ce que mesure la barre (ex: "Chargement du fichier").
CSS Parts
Utilisez ::part(name) pour styler ces éléments depuis l'extérieur.
Certaines parts indiquent un rôle transverse, partagé avec d'autres composants — voir Personnalisation avancée.
1 sur 6progressbar
Racine du composant.
2 sur 6label
Le `<p>` contenant le slot et le pourcentage.
3 sur 6label-text
Le `<span>` autour du slot.
4 sur 6percent
Le `<strong>` affichant la valeur numérique du pourcentage.
5 sur 6track
Le `<div>` représentant le fond de la barre (rail).
6 sur 6bar
Le `<div>` représentant la progression (la partie remplie).
CSS Custom Properties
1 sur 3--ar-progressbar-track-color
Couleur du rail (fond). Repli `ButtonFace` si aucun thème n'est chargé (WCAG 1.4.11).
2 sur 3--ar-progressbar-fill-color
Couleur de la progression. Repli `ButtonText` si aucun thème n'est chargé (WCAG 1.4.11).
3 sur 3--ar-progressbar-max-width
Largeur maximale du composant. Repli `500px` si aucun thème n'est chargé — sans plafond, le pourcentage peut s'éloigner visuellement de son label sur un conteneur très large.