进度条 Progress
该组件封装自 Radix UI Progress，并根据不同状态添加样式，支持四种状态（normal、active、exception、success），适用于展示任务进度、加载状态等。
📦 引入方式
import { Progress } from '@npmqg/react-ui-progress';
🧩 使用示例
- 示例
- 源码
<Progress value={60} status="active" />
- 示例
- 源码
<Progress value={80} className="w-80" status="success" />
🧩 组件结构
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | 0 | 进度条的值，范围为 0 到 100。 |
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属性可以轻松覆盖默认样式，调整组件的外观。