Progress

Progress 用于展示任务、上传、下载、表单流程等操作的完成进度。组件基于 Radix Progress 封装，支持受控 value、最大值 max、主题色、尺寸和自定义 slot 样式。

import { Progress } from '@skyroc/web-ui';

何时使用

• 展示确定进度的任务，例如上传、下载、安装或流程完成度。
• 需要用颜色表达状态，例如成功、警告、错误或信息提示。
• 需要和项目主题尺寸、圆角和动效保持一致。
• 只需要表达忙碌状态且没有明确百分比时，可使用动画进度或 Skeleton。

基础用法

通过 value 设置当前进度，默认最大值为 100。如果传入 max，实际显示宽度会按 value / max 计算。

<Progress value={60} />

颜色

通过 color 切换进度条语义颜色。根轨道会使用对应颜色的浅色背景，指示条使用对应主题色。

尺寸

通过 size 调整进度条高度，从 xs 到 2xl 共 6 个尺寸。

动态进度

Progress 是受控组件，外部状态变化时会通过 CSS transition 平滑更新指示条位置。

const [value, setValue] = useState(0);

<Progress value={value} />

API

Progress

通用属性参考：继承 Radix Progress Root props，并增加主题色、尺寸和 slot class 配置。

类型