# 加载中

纯样式组件：不需要 JS，写好标记即可。一个转动的圆圈，表示正在加载。三个大小：sm、默认、lg。系统开启“减少动态效果”时圈会静止，所以旁边请同时写“加载中”之类的文字。

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

## 用法

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

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-spinner` | <span>（class） |  | 转动的圆圈；可加 sm 或 lg |
| `role="status"` | 外层容器 |  | 读屏会读出里面的文字 |

## 无障碍

- 圆圈本身加 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。