twenty/packages/twenty-docs/l/zh/twenty-ui/progress-bar.mdx

---
title: 反馈
image: /images/user-guide/emails/emails_header.png
---

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

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

<Tabs>

<Tab title="**用法**">

```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="属性">


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



</Tab>
</Tabs>

## 圆形进度条

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

<Tabs>

<Tab title="用法">

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