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

Indicates progress or countdown and moves from right to left.

<Tabs>
  <Tab title="Usage">
    ```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     | Type    | Description                                                                          | Default   |
    | --------- | ------- | ------------------------------------------------------------------------------------ | --------- |
    | duration  | number  | The total duration of the progress bar animation in milliseconds                     | 3         |
    | delay     | number  | The delay in starting the progress bar animation in milliseconds                     | 0         |
    | easing    | string  | Easing function for the progress bar animation                                       | easeInOut |
    | barHeight | number  | The height of the bar in pixels                                                      | 24        |
    | barColor  | string  | The color of the bar                                                                 | gray80    |
    | autoStart | boolean | If `true`, the progress bar animation starts automatically when the component mounts | `true`    |
  </Tab>
</Tabs>

## Circular Progress Bar

Indicates the progress of a task, often used in loading screens or areas where you want to communicate ongoing processes to the user.

<Tabs>
  <Tab title="Usage">
    ```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="Props">
    | Props    | Type   | Description                           | Default      |
    | -------- | ------ | ------------------------------------- | ------------ |
    | size     | number | The size of the circular progress bar | 50           |
    | barWidth | number | The width of the progress bar line    | 5            |
    | barColor | string | The color of the progress bar         | currentColor |
  </Tab>
</Tabs>