---
title: Retour d'information
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

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

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

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

</Tab>
</Tabs>

## 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.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

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

</Tab>

</Tabs>
