进度条
线性进度条，支持标签位置、状态、分步、缓冲、目标线和不确定进度。只写一个带 data-* 的空元素，内容由库生成。
带行为 核心包 1 个方法
示例
代码
<div class="zh-progress" id="pg" data-value="36" data-name="导入数据"></div>
<div class="zh-progress" data-label="top" data-title="存储空间" data-value="62" data-name="存储空间"></div>
<div class="zh-progress" data-status="exception" data-value="42" data-name="上传失败"></div>
<div class="zh-progress" data-steps="10" data-value="60" data-name="完成步骤"></div>
<div class="zh-progress" data-indeterminate="true" data-label="none" data-name="加载中"></div>
<script>
ZhaoUI.progress.set('#pg', 80);
</script>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-value | .zh-progress | 0 到 100 | 当前进度 |
data-label | .zh-progress | outside（默认）| inside | top | none | 百分比文字的位置；top 时用 data-title 作标题 |
data-name | .zh-progress | 字符串 | 无障碍名称（aria-label），务必填写 |
data-status | .zh-progress | normal | success | warning | exception | 状态色；进度到 100 且未指定状态时自动变为 success，data-auto="off" 可关闭 |
data-steps | .zh-progress | 整数 | 分步显示，如 10 表示十格 |
data-buffer | .zh-progress | 0 到 100 | 缓冲进度（比如视频缓冲），画在主进度之下 |
data-target / data-target-label | .zh-progress | 0 到 1 / 字符串 | 目标线位置（0.8 表示 80%）与它的文字 |
data-indeterminate | .zh-progress | true | 不确定进度：显示循环动画，无数值 |
data-size | .zh-progress | sm | lg | 尺寸 |
is-active / is-striped | .zh-progress | class | 进行中的流光 / 条纹效果 |
方法
ZhaoUI.progress.set(el, value)：更新进度（0 到 100），同步更新文字、状态色和 aria-valuenow。el 可以是元素或选择器
样式类
zh-progress
无障碍
- 元素自动带 role="progressbar" 与 aria-valuenow / aria-valuetext（如「64%，已完成」）
- 不确定进度带 aria-busy="true"，读作「加载中」
- 状态不只靠颜色：成功和失败会在文字位置显示图标
- 开启「减少动态效果」时，流光和循环动画会停止
常见问题
进度条是什么？
线性进度条，支持标签位置、状态、分步、缓冲、目标线和不确定进度。只写一个带 data-* 的空元素，内容由库生成。
怎么使用进度条？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。
进度条有哪些方法？
ZhaoUI.progress.set(el, value)：更新进度（0 到 100），同步更新文字、状态色和 aria-valuenow。el 可以是元素或选择器。
进度条支持键盘和读屏吗？
元素自动带 role="progressbar" 与 aria-valuenow / aria-valuetext（如「64%，已完成」）；不确定进度带 aria-busy="true"，读作「加载中」；状态不只靠颜色：成功和失败会在文字位置显示图标。
进度条需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。