Progress 进度条
显示任务执行进度，支持线形 / 圆环 / 仪表盘三种形态、状态色、不确定态、自定义颜色与文本、条纹、步进分段、缓冲段等能力。
基础用法
基础用法
percent 为当前进度值（默认值域 0–100，自动夹取）；进度满 100 且未设置 status 时自动显示成功绿。value 是 percent 的别名（两者同设时 percent 优先），宿主按直觉写 value 同样生效。
状态
状态
status 支持 success（绿）/ warning（橙）/ error（红）三档语义色，优先级高于「满值自动成功绿」。
隐藏文字
隐藏文字
no-text 隐藏右侧/圆心百分比；show-text="false" 等效。
圆形进度
Circle 圆环
圆环默认直径 48、线宽 6，圆心显示百分比；type="circle" 切换形态。
圆形尺寸与线宽
尺寸 / 线宽
圆形状态
Circle 状态色与状态图标
status="success|error|warning" 整环变色，且圆心百分比自动替换为对应状态图标（✓ / ✗ / 警示，真 SVG 图标）；未设 status 且进度满 100 时圆心同样显示成功图标。
动态进度
动态进度
不确定态
Indeterminate 不确定加载
indeterminate 表示「时长未知的进行中」：忽略 percent / steps / buffer / striped，line 为滑块扫过动画、circle / dashboard 为分段弧旋转；同时按无障碍规范摘除 aria-valuenow。label 属性为屏幕阅读器提供无障碍名（视觉不可见）。
仪表盘
Dashboard 仪表盘
type="dashboard" 为底部开口的仪表盘形态（270° 可用弧），size / stroke-width / status / color / stroke-linecap 与圆环一致；默认插槽投影到盘心（如上例 75/128G）。
自定义颜色
color / track-color 自定义色
color / track-color 接受 11 个预设色板名（走主题 token，暗色自动适配）或任意 CSS 色串；color 还支持渐变串（建议仅 line 形态使用——环的描边无法消费 linear-gradient() 背景语法）。显式 color 优先于 status 语义色。
自定义文本
默认插槽自定义文本
默认插槽覆盖内置百分比：line 投影到右侧文本区，circle / dashboard 投影到圆心，并优先于状态图标。
条纹
striped 条纹 / striped-flow 流动条纹
striped 叠加斜纹（密度随轨道高度自适应），striped-flow 在此之上让条纹流动（striped-flow 单独使用时自动含条纹）；仅 line 形态生效。
步进分段
steps 步进分段
steps 把 line 切成 N 等分段（gap 可用 --oas-progress-step-gap 覆盖），亮段数随 percent 四舍五入联动；仅 line 形态生效。
缓冲段
buffer 缓冲进度（视频/下载）
buffer（与 percent 同值域）在轨道上渲染浅色缓冲段、主进度覆盖其上；仅 line 形态生效。
线形粗细与内嵌文本
size 档位 / stroke-width / text-inside
line 形态下 size 为高度档位（small 4px / medium 8px / large 12px），stroke-width 直接指定轨道高度（px，优先于档位）；text-inside 把文本移入条内（未显式指定粗度时轨道自动提升高度）；文本只压在已填充段内，填充过窄（不足约 6 字符）时自动隐藏，避免半个数字露在轨道上。
垂直进度条
vertical 让 line 形态垂直化：轨道变纵向，粗细沿用 size / stroke-width 档位，填充自下而上；height 指定纵向高度（纯数字视为 px，支持 vh/% 等单位，非法值回退默认 200px；横向形态下该属性被忽略）。circle / dashboard 形态不受 vertical 影响。
vertical 垂直进度
端帽
stroke-linecap 圆环端帽
stroke-linecap 控制圆环 / 仪表盘进度弧的端帽形状：round（默认，圆头）/ butt（平头）；line 形态不适用。
值域
max 值域
max 定义满值（默认 100）：percent / buffer 语义为「当前值」（0–max 夹取），显示宽度与百分比按 值 / max 换算，aria-valuenow / aria-valuemax 同步真实值。
无障碍
role="progressbar"+aria-valuenow/aria-valuemin/aria-valuemax全形态同步；indeterminate时按 APG 摘除aria-valuenow。label属性写入aria-label，为屏幕阅读器提供可读名称（视觉不可见，见「不确定态」demo）。- 组件级 CSS 变量开口：
--oas-progress-color/--oas-progress-track-color/--oas-progress-height/--oas-progress-buffer-color/--oas-progress-stripe-color/--oas-progress-stripe-size/--oas-progress-step-gap/--oas-progress-inside-color/--oas-progress-duration。
API
oas-progress
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
buffer | 缓冲值（line 限定，0–max 夹取）：主进度之后的静态缓冲段，用于流式加载/视频缓冲场景 | string | — |
color | 进度色：预设名（走 --oas-preset-* token）或任意 CSS 色串/渐变串（渐变建议 line）；优先于 status 语义色与满值绿 | string | — |
height | 纵向长度（仅 vertical 生效）：纯数字视为 px，支持 px/vh/%，非法回落默认 | string | — |
indeterminate | 不确定态（无确定值加载）：忽略 percent/steps/buffer/striped，摘除 aria-valuenow（APG）；line 滑块扫过 / circle·dashboard 分段弧旋转 | boolean | — |
label | 无障碍名（写入进度条的 aria-label） | — | — |
max | 值域上限（默认 100）：percent/buffer 语义为当前值，宽度与文本按 value/max 换算，aria 同步真实值 | string | 100 |
no-text | 隐藏右侧/圆心百分比文本 | boolean | — |
percent | 进度百分比（0–100，自动夹取） | string | 0 |
show-text | 是否显示百分比文本 | string | true |
size | 尺寸：line=高度档 small(4px) / medium(8px，默认) / large(12px)；circle/dashboard=直径 px（默认 48） | string | 48 |
status | 状态色；error 红色、success 绿色，未设置且进度满 100 时显示成功绿 | string | — |
steps | 步进分段（line 限定）：整数 ≥2 等分，亮段数 = round(百分比 × 段数) | string | — |
striped | 条纹纹理（line 限定） | boolean | — |
striped-flow | 流动条纹（line 限定；单用自动含条纹） | boolean | — |
stroke-linecap | 圆环端帽 round（默认）/ butt（circle/dashboard） | string | round |
stroke-width | 线宽 px：circle/dashboard 圆环粗细（默认 6）；line 轨道高度（优先于 size 档位） | string | 6 |
text-inside | 文本内嵌进度条内（line 限定；未显式指定粗细时轨道自动提升到可容纳文本） | boolean | — |
track-color | 轨道色：协议同 color | string | — |
type | 形态：line（默认）/ circle / dashboard（仪表盘：底部开口 270° 弧） | string | line |
value | percent 的别名（当前进度值，与 percent 同值域 0–max 夹取）：两者同设时 percent 优先，仅 percent 缺失时读此值 | string | 0 |
vertical | 垂直方向（仅 line 形态）：轨道纵向、填充自下而上；circle/dashboard 不受影响 | boolean | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 自定义文本：line 右侧 / text-inside 条内 / 圆心；优先于状态图标与内置百分比 |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-progress-buffer-color | color-mix(in srgb, var(--oas-progress-color, var(--oas-color-primary)) 35%, transparent) |
--oas-progress-color | var(--oas-color-primary) |
--oas-progress-duration | 1.2s |
--oas-progress-height | var(--oas-space-2) |
--oas-progress-inside-color | var(--oas-color-bg) |
--oas-progress-step-gap | var(--oas-space-1) |
--oas-progress-stripe-color | var(--oas-color-bg) |
--oas-progress-stripe-size | calc(var(--oas-progress-height, var(--oas-space-2)) * 2.5) |
--oas-progress-track-color | var(--oas-color-bg-hover) |
role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax（line 与 circle 均同步）。