
- Utilisation
- Propriétés
Barre de Progression Circulaire
Indique le progrès d’une tâche, souvent utilisé sur des écrans de chargement ou dans des zones où vous souhaitez communiquer des processus en cours à l’utilisateur.- Utilisation
- Propriétés

import { ProgressBar } from "twenty-ui/feedback";
export const MyComponent = () => {
return (
<ProgressBar
duration={6000}
delay={0}
easing="easeInOut"
barHeight={10}
barColor="#4bb543"
autoStart={true}
/>
);
};
| Propriétés | Type | Description | Par défaut |
|---|---|---|---|
| durée | nombre | La durée totale de l’animation de la barre de progression en millisecondes | 3 |
| délai | nombre | Le délai de démarrage de l’animation de la barre de progression en millisecondes | 0 |
| adoucissement | chaîne | Fonction d’adoucissement pour l’animation de la barre de progression | easeInOut |
| hauteurBarre | nombre | La hauteur de la barre en pixels | 24 |
| couleurBarre | chaîne | La couleur de la barre | gray80 |
| démarrageAutomatique | booléen | Si true, l’animation de la barre de progression commence automatiquement lorsque le composant est monté | vrai |
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
export const MyComponent = () => {
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
| Propriétés | Type | Description | Par défaut |
|---|---|---|---|
| taille | nombre | La taille de la barre de progression circulaire | 50 |
| largeurBarre | nombre | La largeur de la ligne de la barre de progression | 5 |
| couleurBarre | chaîne | La couleur de la barre de progression | couleurCourante |