Brickslab.Tools

@brickslab./ui-web

Barre de progression horizontale pour visualiser une valeur relative (pourcentage, score, quota). Disponible en 4 couleurs, 2 tailles et avec affichage optionnel de la valeur.

Color schemes

brand · green · amber · red

brand82%

green91%

amber57%

red23%

Tailles

sm (4px) · md (8px — défaut)

Avec libellé et valeur

props label et showValue

Score qualité78%

Couverture tests45%

Composants documentés94%

Max personnalisé

prop max — calcul du pourcentage relatif

47 / 100 composants47%

200 / 300 composants67%

Animation

animate=true (défaut) — remplissage depuis 0 à l'entrée dans le viewport

Score audit (0.8s)87%

Couverture (1.4s)68%

A11y (2s)42%

Sans animation94%

Props

Prop	Type	Défaut	Requis	Description
`value`	`number`	—	—	Valeur actuelle de la progression (entre 0 et max).
`max`	`number`	`100`	—	Valeur maximale. Le pourcentage affiché est calculé via value/max.
`label`	`string`	—	—	Libellé affiché au-dessus de la barre.
`colorScheme`	`"brand" \| "green" \| "amber" \| "red"`	`"brand"`	—	Couleur de la barre de progression.
`size`	`"sm" \| "md"`	`"md"`	—	Épaisseur de la barre (sm = 4px, md = 8px).
`showValue`	`boolean`	`false`	—	Affiche le pourcentage calculé à droite du libellé.
`animate`	`boolean`	`true`	—	Anime le remplissage depuis 0% lors de l'entrée dans le viewport. Désactivé automatiquement si prefers-reduced-motion est actif.
`duration`	`number`	`0.8`	—	Durée de l'animation de remplissage en secondes.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  value={0}
  max={100}
  label="..."
  colorScheme="brand"
  size="md"
  showValue={false}
  animate={true}
  duration={0.8}
/>

valuemaxlabelcolorSchemesizeshowValueanimateduration

Utilisation

tsx

import { ProgressBar } from "@brickslab./ui-web";

// Animée par défaut (0% → valeur au scroll)
<ProgressBar value={65} />

// Durée personnalisée
<ProgressBar value={78} label="Qualité" showValue duration={1.4} />

// Sans animation
<ProgressBar value={90} colorScheme="green" animate={false} showValue />

// Color schemes
<ProgressBar value={90} colorScheme="green" label="Tests passés" showValue />
<ProgressBar value={55} colorScheme="amber" label="Couverture" showValue />
<ProgressBar value={20} colorScheme="red" label="Erreurs" showValue />

// Avec max personnalisé
<ProgressBar value={200} max={300} label="Composants documentés" showValue />