### 何时使用

当页面局部或全部处于数据处理的等待中，需要让用户清晰感知到当前状态时。

### 与页面布局相关

##### 页面加载时，位于加载内容区域的正中间。

<div class="legend">
  <div class="item">
    <h5></h5>
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/loading-1@2x.png"/>
    <em></em>
  </div>

</div>

<hr />

##### 局部文本或图片元素加载时，位于元素内容区域的正中间。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/loading-2@2x.png" />
  </div>

  <div class="item"></div>
</div>

### 相似组件

| 组件名               | 何时使用                                                               |
| :------------------- | :--------------------------------------------------------------------- |
| [加载中](./loading)  | 当页面局部或全部处于数据处理的等待中，需要让用户清晰感知到当前状态时。 |
| [进度条](./progress) | 展示操作的当前进度时。                                                 |
