# 环形进度

圆环、仪表盘（270°）、半圆三种形状的进度，中心显示百分比或自定义内容。

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

## 用法

```html
<div class="zh-ring" id="ring" data-value="65" data-name="完成率"></div>
<div class="zh-ring" data-size="lg" data-value="88" data-name="目标" data-caption="完成率"></div>
<div class="zh-ring" data-shape="gauge" data-value="72" data-name="仪表"></div>
<div class="zh-ring" data-value="42" data-status="exception" data-name="失败"></div>

<script>
ZhaoUI.ring.set('#ring', 90);
</script>
```

## 样式类

`zh-ring`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-value` | .zh-ring | 0 到 100 | 当前进度；必须写，库据此初始化 |
| `data-shape` | .zh-ring | full（默认）\| gauge \| semi | 圆环 / 仪表盘 / 半圆 |
| `data-size` | .zh-ring | sm \| lg | 尺寸，默认中号 |
| `data-caption` | .zh-ring | 字符串 | 百分比下方的小字 |
| `data-status` | .zh-ring | normal \| success \| warning \| exception | 状态色；到 100 自动变为 success，中心换成对勾 |
| `data-name` | .zh-ring | 字符串 | 无障碍名称 |

## 方法

- `ZhaoUI.ring.set(el, value, centerHtml?)`：更新进度；centerHtml 可选，传入则替换中心内容。centerHtml 按 HTML 处理，不要放用户输入

## 无障碍

- 自动带 role="progressbar" 与 aria-valuenow
- 到 100 时中心显示对勾，失败时显示叉，不只靠颜色区分

## 常见问题

### 环形进度是什么？

圆环、仪表盘（270°）、半圆三种形状的进度，中心显示百分比或自定义内容。

### 怎么使用环形进度？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。

### 环形进度有哪些方法？

ZhaoUI.ring.set(el, value, centerHtml?)：更新进度；centerHtml 可选，传入则替换中心内容。centerHtml 按 HTML 处理，不要放用户输入。

### 环形进度支持键盘和读屏吗？

自动带 role="progressbar" 与 aria-valuenow；到 100 时中心显示对勾，失败时显示叉，不只靠颜色区分。

### 环形进度需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。