Progress
进度条：line（horizontal / vertical）与 circle 两形态；percent 钳制到 0..100，showInfo/format 控制信息区，stroke 支持字符串或分段颜色数组（配合 strokeGradient 渐变），orbitStroke 自定义轨道色，数字滚动线性动画；role=progressbar，受控 percent 不回写。
如何引入
import { Progress } from '@chenzy-design/svelte';标准的进度条
通过 stroke 控制填充色、percent 控制进度、size 控制尺寸；size 不满足时可用 style 传入 height 自定义高度。
展示百分比文本
showInfo 控制是否展示百分比数字，format 可格式化展示文本。
10%
25%
50%
500‰
垂直的进度条
direction="vertical" 展示垂直进度条，可通过 style 传入 width 控制宽度。
环形进度条
type="circle" 展示环形进度条，默认尺寸 72×72，可通过 width 控制大小。
小号的环形进度条
size="small" 小号环形进度条默认尺寸 24×24，不显示中心文本。
动态改变进度
percent 变化时数字平滑滚动（线性插值动画）。
40%
40%
自定义中心文字内容
format 自定义中心文字，入参为当前百分比；showInfo={false} 或 format 返回空串则不显示。
75Days
Done
圆角/方角边缘
strokeLinecap 控制环形进度条边缘形状（round / square），仅 type=circle 生效。
自定义进度条颜色
stroke 传入 Array<{percent, color}>，按当前 percent 落入的区间取色，支持 Hex / Hsl / Rgb / Design Token。
10%
10%
自动补齐颜色区间
strokeGradient=true 时自动补齐颜色区间生成渐变。
65%
65%
65%
API 参考
Progress
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
percent | 受控进度，钳制到 0..100 | number | 0 |
type | 形态 | 'line'|'circle' | 'line' |
direction | 条状进度条方向 | 'horizontal'|'vertical' | 'horizontal' |
size | small 仅 type=circle 生效，large 仅 type=line 生效 | 'default'|'small'|'large' | 'default' |
width | 环形进度条直径 px | number | size='default' 时 72，'small' 时 24 |
strokeWidth | type=circle 时进度条宽度 | number | 4 |
strokeLinecap | circle 端点形状（仅 type=circle 生效） | 'round'|'square' | 'round' |
showInfo | 是否显示信息区/中心文本 | boolean | false |
stroke | 填充色；数组时按 percent 区间取色（color 支持 Hex/Hsl(a)/Rgb(a)/Design Token） | string | Array<{percent:number; color:string}> | 'var(--cd-color-success)' |
strokeGradient | 自动补齐颜色区间生成渐变（需 stroke 为区间数组） | boolean | false |
orbitStroke | 进度条轨道填充色 | string | 'var(--cd-color-fill-0)' |
format | 格式化信息区文本，入参为当前百分比 | (percent: number) => string | null | (percent) => percent + '%' |
motion | 数字滚动/过渡动画，被 reduced-motion 覆盖 | boolean | true |
class | 根节点样式类名 | string | undefined |
style | 根节点内联样式（如自定义 height/width） | string | undefined |
id | id 标识 | string | undefined |
aria-label | 无障碍标签 | string | undefined |
aria-labelledby | 关联标签元素 id | string | undefined |
aria-valuetext | 无障碍值文本（优先于 valuenow） | string | undefined |
formatSnippet | 信息区自定义内容 snippet，优先于 format prop | Snippet<[{ percent: number }]> | undefined |
Slots
| 名称 | 说明 |
|---|---|
formatSnippet | 自定义信息区内容（优先于 format prop） |
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) | 进度条动画曲线 |