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

# 反馈

表示进度或倒计时，并从右向左移动。

<Tabs>
  <Tab title="**用法**">
    ```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="属性">
    | 属性        | 类型  | 描述                        | 默认        |
    | --------- | --- | ------------------------- | --------- |
    | 持续时间      | 数字  | 进度条动画的总持续时间，以毫秒为单位        | 3         |
    | delay     | 数字  | 进度条动画开始的延迟时间，以毫秒为单位       | 0         |
    | easing    | 字符串 | 进度条动画的缓动函数                | easeInOut |
    | barHeight | 数字  | 进度条的高度（以像素为单位）            | 24        |
    | barColor  | 字符串 | 进度条的颜色                    | gray80    |
    | 自动开始      | 布尔值 | 如果为“true”，则组件加载时进度条动画自动开始 | `真`       |
  </Tab>
</Tabs>

## 圆形进度条

指示任务的进展，通常用于加载屏幕或您希望向用户传达正在进行的过程的地方。

<Tabs>
  <Tab title="用法">
    ```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="属性">
    | 属性       | 类型  | 描述       | 默认           |
    | -------- | --- | -------- | ------------ |
    | 大小       | 数字  | 圆形进度条的大小 | 50           |
    | barWidth | 数字  | 进度条线的宽度  | 5            |
    | barColor | 字符串 | 进度条的颜色   | currentColor |
  </Tab>
</Tabs>