Progression

Une barre fine qui se remplit au fur et à mesure qu’une tâche est effectuée — téléchargements, installations, processus d’intégration en plusieurs étapes —, avec un effet « néobrutaliste » combinant contours et ombres.

"use client"

import * as React from "react"

La barre de progression indique quelle part d’une tâche est accomplie — une piste qui se remplit de 0 à 100. Construite sur le composant Base UI Progress et habillée selon la recette néobrutaliste : bordure épaisse, ombre franche, remplissage plein.

À privilégier pour :

Téléversements et téléchargements de fichiers — une progression déterminée, pilotée par les octets, avec un pourcentage visible.
Parcours en plusieurs étapes — onboarding, paiement et assistants ; la barre montre où en est l’utilisateur.
Tâches longues — imports, exports et installations dont l’avancement est rapporté par le serveur.

Installation


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
npx shadcn@latest add https://neobrutalism.com/r/base/progress.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/progress.json

Installez les dépendances suivantes :


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copiez et collez le code suivant dans votre projet.

components/ui/progress.tsx

"use client"

import * as React from "react"
import { Progress as ProgressPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "relative flex h-4 w-full items-center overflow-hidden rounded border-2 bg-background",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="size-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }

Adaptez les chemins d'import à la structure de votre projet.

Utilisation

import { Progress } from "@/components/ui/progress"

<Progress value={33} />

Composition

Avec étiquette et valeur

Utilisez ProgressLabel et ProgressValue pour afficher une étiquette et une valeur.

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Exemples

Étiquette

Utilisez ProgressLabel et ProgressValue pour afficher une étiquette et une valeur.

Upload progress

import {
  Progress,
  ProgressLabel,

Contrôlé

Une barre de progression pilotable par un curseur.

"use client"

import * as React from "react"

RTL

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

تقدم الرفع

"use client"

import * as React from "react"

Accessibilité

La barre de progression est un indicateur d’état, pas un contrôle — elle ne prend jamais le focus et n’a aucune interaction clavier. Base UI rend role="progressbar" avec aria-valuemin, aria-valuemax et aria-valuenow, et ProgressLabel est associé automatiquement via aria-labelledby — préférez-le (ou un aria-label) à une barre sans étiquette, pour que les lecteurs d’écran puissent dire ce qui est en cours de chargement, et pas seulement le pourcentage. Passez value={null} quand l’avancement est inconnu ; la barre passe alors en état indéterminé.

Référence API

Consultez la documentation Base UI Progress.