- **用法**
- 属性
import { ProgressBar } from "twenty-ui/feedback";
export const MyComponent = () => {
return (
<ProgressBar
duration={6000}
delay={0}
easing="easeInOut"
barHeight={10}
barColor="#4bb543"
autoStart={true}
/>
);
};
| 属性 | 类型 | 描述 | 默认 |
|---|---|---|---|
| 持续时间 | 数字 | 进度条动画的总持续时间，以毫秒为单位 | 3 |
| delay | 数字 | 进度条动画开始的延迟时间，以毫秒为单位 | 0 |
| easing | 字符串 | 进度条动画的缓动函数 | easeInOut |
| barHeight | 数字 | 进度条的高度（以像素为单位） | 24 |
| barColor | 字符串 | 进度条的颜色 | gray80 |
| 自动开始 | 布尔值 | 如果为“true”，则组件加载时进度条动画自动开始 | 真 |
圆形进度条
指示任务的进展，通常用于加载屏幕或您希望向用户传达正在进行的过程的地方。- 用法
- 属性
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
export const MyComponent = () => {
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
| 属性 | 类型 | 描述 | 默认 |
|---|---|---|---|
| 大小 | 数字 | 圆形进度条的大小 | 50 |
| barWidth | 数字 | 进度条线的宽度 | 5 |
| barColor | 字符串 | 进度条的颜色 | currentColor |