# 进度条

线性进度条，支持标签位置、状态、分步、缓冲、目标线和不确定进度。只写一个带 data-* 的空元素，内容由库生成。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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>
```

## 样式类

`zh-progress`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `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 可以是元素或选择器

## 无障碍

- 元素自动带 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。