Composant · Feedback

ProgressBar

Stable

Barres de progression déterminée et indéterminée avec label, message de support, valeurs et options visuelles.

Exemples

États

Validé par QA

3 tâches bloquantes

Voir le code (Svelte)

<div class="docs-demo-stack">
  <ProgressBar label="Import documents" value={74} max={100} showValue />
  <ProgressBar
    label="Validation"
    value={88}
    max={100}
    tone="success"
    size="lg"
    showValue
    helperText="Validé par QA"
  />
  <ProgressBar
    label="Contrôles qualité"
    value={34}
    max={100}
    tone="warning"
    size="sm"
    showValue
  />
  <ProgressBar
    label="Échec de l’import"
    value={34}
    max={100}
    tone="error"
    valueText="3 / 12"
    helperText="3 tâches bloquantes"
    showValue
  />
</div>

État indéterminé

Statut en attente d’un back-end de fin de lot.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <ProgressBar
    indeterminate
    label="Traitement en cours"
    helperText="Statut en attente d’un back-end de fin de lot."
  />
  <ProgressBar
    label="File d’attente vide"
    value={0}
    max={1}
    tone="neutral"
    showValue={false}
  />
</div>

API

Prop	Type	Default
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`value`	`number`	`0`
`max`	`number`	`100`
`indeterminate`	`boolean`	`false`
`tone`	`"neutral" \| "success" \| "warning" \| "error"`	`"neutral"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`showValue`	`boolean`	`false`
`valueText`	`string`	`auto`
`class`	`string`	optionnel
`...props`	`HTMLAttributes<HTMLDivElement>`	transmis

Le composant met en forme un <div role="progressbar">. Quand indeterminate est vrai, aria-valuemin, aria-valuemax et aria-valuenow ne sont pas fournis. La valeur est bornée entre 0 et max.

Notes d’usage

Utilisez showValue quand la progression chiffrée est utile pour l’utilisateur; sinon laissez la valeur implicite en clair via le label seul.
Réservez le mode indeterminate aux traitements sans borne connue en nombre d’étapes.
Le rendu d’animation du mode indéterminé est désactivé avec prefers-reduced-motion.

Tokens utilisés

--st-semantic-text-primary
--st-semantic-text-secondary
--st-semantic-surface-subtle
--st-radius-pill
--st-semantic-action-primary
--st-semantic-feedback-success
--st-semantic-feedback-warning
--st-semantic-feedback-error
--st-component-field-helpText
--st-motion-fast
--st-motion-easing
--st-progressBar-color