Progress 设计文档

进度条:line(horizontal / vertical)与 circle 两形态;percent 钳制到 0..100,showInfo/format 控制信息区,stroke 支持字符串或分段颜色数组(配合 strokeGradient 渐变),orbitStroke 自定义轨道色,数字滚动线性动画;role=progressbar,受控 percent 不回写。

← API 文档

使用建议

进度条:line(horizontal / vertical)与 circle 两形态;percent 钳制到 0..100,showInfo/format 控制信息区,stroke 支持字符串或分段颜色数组(配合 strokeGradient 渐变),orbitStroke 自定义轨道色,数字滚动线性动画;role=progressbar,受控 percent 不回写。

Accessibility

  • role=progressbar + aria-valuemin/max=0/100 与 aria-valuenow;支持 aria-valuetext(优先于 valuenow)、aria-label、aria-labelledby;不可聚焦不设 tabindex;reduced-motion 禁用数字滚动与过渡。

设计变量

变量默认值用法
--cd-motion-progress-transition-duration 0.3s进度条动画时长
--cd-motion-progress-transition-timing-function cubic-bezier(0.62, 0.05, 0.36, 0.95)进度条动画曲线