进度条 Progress

该组件封装自 Radix UI Progress，并根据不同状态添加样式，支持四种状态（normal、active、exception、success），适用于展示任务进度、加载状态等。

---

📦 引入方式

import { Progress } from '@itera-web/react-ui-progress';

---

🧩 使用示例

示例

60%

80%

进度:59%

90%

59%

进度:59%

进度:59%

源码

<Progress value={100} status="active" />
<Progress value={70} status="active" format={() => ''} />
<Progress value={60} status="active" />
<Progress value={80} className="w-80" status="success" />
<Progress
  format={(val) => <span className="text-[14px]">进度:{val}%</span>}
  value={59}
  status="success"
  size={120}
/>
<Progress value={90} gradient={['red', 'yellow']} />
<Progress circle value={59} className="text-purple-500" size={100} />
<Progress
  circle
  format={(val) => <span className="text-[14px]">进度:{val}%</span>}
  value={59}
  className="text-green-500"
  size={120}
/>
<Progress
  circle
  format={(val) => <span className="text-[14px]">进度:{val}%</span>}
  value={59}
  gradient={['red', 'yellow']}
  size={140}
/>

---

🧩 组件结构

属性	类型	默认值	说明
value	number	0	进度条的值，范围为 0 到 100。
circle	boolean	false	圆形进度条
gradient	array	[]	渐变进度条
format	Function		格式化进度条描述
status	'normal' | 'active' | 'exception' | 'success'	'normal'	进度条状态： • normal：默认状态，绿色 • active：激活状态，蓝色并带动画 • exception：异常状态，红色 • success：成功状态，绿色
className	string	—	自定义类名，用于样式扩展。
...props	React.ComponentPropsWithoutRef	—	继承自 Radix UI Progress 组件的其他属性。

---

🔄 动画效果

• active 状态的进度条会有 pulse 动画效果，使其看起来处于活动状态。
• 其他状态（normal、exception、success）没有动画，进度条保持静止。

---

📏 样式说明

• 高度：h-[10px]，进度条的高度为 10px。
• 背景：bg-section，进度条背景色为定义好的颜色。
• 进度指示器：h-full，指示器填充整个进度条的高度。
• 状态颜色：通过 statusClass 控制进度条的背景色和动画效果，状态值分别映射到不同的颜色。

---

💬 设计说明

• 状态映射：使用 status 属性来动态映射进度条的状态并应用不同的样式。
• 动画支持：只有 active 状态下启用动画，其他状态保持静态，确保 UI 体验的清晰度。
• 自定义性：通过 className 属性可以轻松覆盖默认样式，调整组件的外观。