Retours & statut

Barre de progression

شريط التقدمProgress

Stablesrc/dsm/components/progress.tsx
La barre de progression indique l'avancement mesurable d'une tâche longue : envoi de pièces, instruction d'un dossier, import de fichiers. Utilisez l'état indéterminé quand la durée n'est pas connue à l'avance.

Import

import { Progress } from "@/dsm/components/progress";

Exemples

Par défaut

Avec libellé et valeur affichée.

LTR
Instruction du dossier n° 2026-114872
x

Tons

default, success, warning, error.

LTR
Pièces reçues
x
Dossier complet
x
Espace de stockage utilisé
x
Échec partiel de l'envoi
x

Indéterminée

Durée inconnue, en attente d'une réponse.

LTR
Vérification de votre CNIE auprès de la DGSN
x

Envoi de pièces jointes

Progression d'un import de documents.

LTR
justificatif_domicile.pdf
x

Usage

Quand l'utiliser

  • Utilisez une valeur numérique dès que l'avancement est mesurable (pourcentage de dossier traité, taux de complétion d'un formulaire).
  • Utilisez `value={null}` uniquement pour une tâche dont la durée ne peut pas être estimée (vérification en cours, appel réseau).

Quand ne pas l'utiliser

  • N'utilisez pas la barre de progression pour un simple état d'attente court : préférez un `Spinner`.
  • Ne changez pas de `tone` en cours de route sans raison : réservez `warning`/`error` à un ralentissement ou un échec réel.

Accessibilité & langues

Accessibilité

  • `Progress.Root` porte les attributs ARIA de progression (`aria-valuenow`, `aria-valuemin`, `aria-valuemax`) sans intervention supplémentaire.
  • Le `label` doit décrire la tâche en cours, jamais une simple répétition du pourcentage.

RTL & multilingue

  • La piste et l'indicateur utilisent `w-full`/`h-full` : le remplissage progresse depuis le début de ligne, à droite en arabe, sans code spécifique.

Propriétés

Progress
PropriétéTypeDéfautDescription
value*number | null—Valeur entre 0 et 100 ; `null` pour l'état indéterminé.
labelReactNode—Intitulé de la tâche, affiché au-dessus de la piste.
showValuebooleanfalseAffiche la valeur formatée (« 42 % ») à côté du libellé.
tone"default" | "success" | "warning" | "error"defaultCouleur de l'indicateur.
size"sm" | "md"mdÉpaisseur de la piste.

Composants liés