环形进度
圆环、仪表盘（270°）、半圆三种形状的进度，中心显示百分比或自定义内容。
带行为 核心包 1 个方法
示例
代码
<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>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
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 处理，不要放用户输入
样式类
zh-ring
无障碍
- 自动带 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。