Progress 进度条

xy-progress 用于展示任务完成度、上传状态、部署阶段或配额消耗。样式、文档组织和示例场景都按中后台使用方式做了收敛。

发布流水线

真实页面里更常见的是把进度条放进发布流水线、任务卡片或审批面板里，用来快速判断哪个环节已完成、哪个环节还在推进。

订单中心发布

生产环境 · 负责人 Livia · 2 分钟前

已完成

静态检查、单测与产物打包已完成

结算链路修复

预发环境 · 负责人 Ethan · 8 分钟前

灰度中

灰度 34 / 50 台节点，等待监控窗口结束

素材服务扩容

多活环境 · 负责人 Nora · 刚刚

待确认

支付链路仍有 2 条用例待确认

批处理任务队列

status 适合表达已完成、待确认和失败阻塞；text-inside 更适合导出、补录和回收任务这类紧凑型队列。

合同归档导出

导出批次 #2026-03-25 · 520 份合同全部完成

已完成

100%

设计稿回收任务

素材目录 A17 · 仍有 9 份文件待补齐

待确认

61%

发票补录批次

夜间任务 #M-9042 · 供应商 2 个字段校验失败

失败

待补救 27%

上传与排队场景

当任务还在推进、但暂时拿不到精确百分比时，可以用 indeterminate；分片传输、批量导入这类场景则适合叠加条纹流动效果。

用户主数据回填

主账号、组织关系与角色快照

回填中

46%

订单缺失明细补录

从队列消费增量日志并回放

推进中

64%

仓储对账任务

等待上游返回准确的差异条数

排队中

已接收任务，但暂无准确百分比

指标卡与健康度概览

circle 适合放进指标卡、团队目标、概览面板；dashboard 则更适合承接健康度、达成率这类更偏“仪表盘感”的读数。

履约率

订单中心 · 过去 24 小时

稳定

92%

SLA 达成率

客服工作台 · 本周

需跟进

78%

存储配额

素材服务 · 当前集群

扩容前安全

64%

API

Progress Attributes

属性	说明	类型	默认值
`type`	进度条类型	`ProgressType`	`'line'`
`percentage`	当前百分比，会自动收敛到 `0 - 100`	`number`	`0`
`status`	当前状态	`ProgressStatus`	`''`
`indeterminate`	是否展示不确定进度动画	`boolean`	`false`
`duration`	不确定进度或条纹流动的动画时长	`number`	`3`
`stroke-width`	线形轨道高度或圆环描边宽度	`number`	`6`
`stroke-linecap`	圆环描边端点样式	`ProgressStrokeLinecap`	`'round'`
`text-inside`	是否把文本放进线形进度条内部	`boolean`	`false`
`width`	`circle / dashboard` 的画布宽高	`number`	`126`
`show-text`	是否显示进度文案	`boolean`	`true`
`color`	自定义颜色，支持字符串、分段数组或函数	`ProgressColor`	`''`
`striped`	是否开启条纹纹理	`boolean`	`false`
`striped-flow`	是否开启条纹流动动画	`boolean`	`false`
`format`	自定义文案格式化函数	`ProgressFormatter`	`(percentage) => \`${percentage}%``

Progress Slots

插槽	说明	参数
`default`	自定义进度文案，线形外侧、线形内侧和圆形中心文案都走这个插槽	`ProgressDefaultSlotProps`

Progress 进度条 ​

发布流水线 ​

批处理任务队列 ​

上传与排队场景 ​

指标卡与健康度概览 ​

API ​

Progress Attributes ​

Progress Slots ​