加载中
一个转动的圆圈，表示正在加载。三个大小：sm、默认、lg。系统开启“减少动态效果”时圈会静止，所以旁边请同时写“加载中”之类的文字。
纯样式 核心包
示例
加载中…
代码
<div class="zh-row" role="status"><span class="zh-spinner" aria-hidden="true"></span><span>加载中…</span></div>
<span class="zh-spinner sm" aria-hidden="true"></span> <span class="zh-spinner lg" aria-hidden="true"></span>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
zh-spinner | <span>（class） | 转动的圆圈；可加 sm 或 lg | |
role="status" | 外层容器 | 读屏会读出里面的文字 |
样式类
zh-spinner
无障碍
- 圆圈本身加 aria-hidden="true"，用旁边的文字或外层 role="status" 告诉读屏用户
- 按钮上的加载态用 is-loading，不需要这个组件
常见问题
加载中是什么？
一个转动的圆圈，表示正在加载。三个大小：sm、默认、lg。系统开启“减少动态效果”时圈会静止，所以旁边请同时写“加载中”之类的文字。
怎么使用加载中？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。
加载中支持键盘和读屏吗？
圆圈本身加 aria-hidden="true"，用旁边的文字或外层 role="status" 告诉读屏用户；按钮上的加载态用 is-loading，不需要这个组件。
加载中需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。