> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Feedback

Indica progresso o conto alla rovescia e si muove da destra a sinistra.

<Tabs>
  <Tab title="Utilizzo">
    ```jsx theme={null}
    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">
    | Props           | Tipo     | Descrizione                                                                                                | Predefinito |
    | --------------- | -------- | ---------------------------------------------------------------------------------------------------------- | ----------- |
    | durata          | numero   | La durata totale dell'animazione della barra di progresso in millisecondi                                  | 3           |
    | ritardo         | numero   | Il ritardo nell'avvio dell'animazione della barra di progresso in millisecondi                             | 0           |
    | smorzamento     | stringa  | Funzione di smorzamento per l'animazione della barra di progresso                                          | easeInOut   |
    | altezzaBarra    | numero   | L'altezza della barra in pixel                                                                             | 24          |
    | coloreBarra     | stringa  | Il colore della barra                                                                                      | gray80      |
    | avvioAutomatico | booleano | Se `true`, l'animazione della barra di progresso inizia automaticamente quando il componente viene montato | `vero`      |
  </Tab>
</Tabs>

## Barra di progresso circolare

Indica il progresso di un'attività, spesso utilizzata in schermate di caricamento o aree in cui si desidera comunicare processi in corso all'utente.

<Tabs>
  <Tab title="Utilizzo">
    ```jsx theme={null}
    import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

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

  <Tab title="Proprietà">
    | Proprietà      | Tipo    | Descrizione                                       | Predefinito  |
    | -------------- | ------- | ------------------------------------------------- | ------------ |
    | dimensione     | numero  | La dimensione della barra di progresso circolare  | 50           |
    | larghezzaBarra | numero  | La larghezza della linea della barra di progresso | 5            |
    | coloreBarra    | stringa | Il colore della barra di progresso                | currentColor |
  </Tab>
</Tabs>