Retour d'information

Indique le progrès ou le compte à rebours et passe de droite à gauche.

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`

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 { 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

Welcome

Core Concepts

Barre de Progression Circulaire

​Barre de Progression Circulaire

Barre de Progression Circulaire