Progress Barre de Progression
Introduction
Un composant d'état visuel qui communique la progression de finalisation d'une opération. Il affiche les valeurs d'état en temps réel via une barre linéaire standard ou un cadran circulaire moderne. Principalement utilisé pour guider les utilisateurs lors d'assistants multi-étapes, de téléversements, de traitements de fichiers ou d'installations système.
Le composant Progress est totalement intégré en tant que bloc progress dans le Page Builder, permettant aux auteurs et développeurs de configurer facilement plages visuelles, thèmes, tailles, libellés et dispositions des indicateurs directement dans le CMS.
Usage
Ces exemples illustrent comment les éditeurs de contenu lient et structurent des indicateurs de progression interactifs.
1. Barre de progression linéaire standard avec libellé d'état
Un indicateur à barre linéaire classique affichant la progression de téléchargement ou de traitement, avec libellé actif et texte de pourcentage formatté.
{
"type": "progress",
"label": "System Backup",
"value": 72,
"showValueText": true,
"type": "linear",
"size": "md"
}
2. Jauge de progression circulaire compacte
Rend la métrique de complétion sous forme de cadran circulaire compact. Utile pour les graphiques de synthèse, les widgets de tableau de bord ou les éléments de grille isolés.
{
"type": "progress",
"label": "Storage Used",
"type": "circular",
"value": 40,
"showValueText": true
}
3. Progression à rayures accentuée avec couleur personnalisée (vert succès)
Démontre comment appliquer une palette de thème dédiée, un motif de rayures et une grande échelle à une barre de progression.
{
"type": "progress",
"label": "Uploading media files",
"value": 85,
"showValueText": true,
"striped": true,
"colorPalette": "green",
"size": "lg"
}
Props
| Propriété | Type de champ CMS | Défaut | Description / options prises en charge |
|---|---|---|---|
Libellé de progression (label) | string | - | En-tête descriptif optionnel au-dessus de la piste. |
Valeur actuelle (value) | number | 0 | Valeur de complétion numérique. null rend un état indéterminé (chargement). |
Valeur minimale (min) | number | 0 | Borne inférieure de l'échelle. |
Valeur maximale (max) | number | 100 | Borne supérieure de l'échelle. |
Afficher le pourcentage (showValueText) | boolean | false | Affiche le texte de pourcentage exact à côté de la piste. |
Type d'indicateur (type) | select | "linear" | Format visuel de la mise en page. • Options : "linear", "circular". |
Variante visuelle (variant) | select | "solid" | Style visuel de la piste et du remplissage. • Options : "solid", "subtle". |
Forme de bordure (shape) | select | "full" | Arrondi des coins des barres linéaires. • Options : "square", "rounded", "full". |
Piste rayée (striped) | boolean | false | Rend un motif diagonal rayé sur les barres linéaires. |
Thème de couleur (colorPalette) | select | "blue" | Palette de thème du remplissage. • Options : blue, green, red, purple, orange, amber, cyan, slate. |
Échelle de taille (size) | select | "md" | Contrôle la hauteur ou le rayon circulaire. • Options : "xs", "sm", "md", "lg", "xl". |
Developer Notes & Accessibility
- Sans hydratation (statique uniquement) : Le composant Progress fonctionne purement via des liaisons de mise en page et des animations CSS, étant une composante statique (Tier 3) sans JavaScript client.
- Conformité WAI-ARIA : En interne, il compile vers des enveloppes sémantiques de progression (
role="progressbar",aria-valuenow,aria-valuemin,aria-valuemax). Sivalueest indéfini ou nul, il bascule automatiquement vers un état de chargement indéterminé.