# Loading 加载中

在网络较慢或数据较多时，表示数据正在加载的状态。

### 图标加载

加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。

demo

### 文字加载

加载过程中有文字显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。

demo

### 文字和图标共同显示加载

加载过程中有文字和图标共同显示。适用于打开页面或操作完成后页面内等待刷新的加载场景。

demo

### 不同尺寸的加载

小尺寸适用于组件内加载场景，中尺寸适用于容器如卡片、表格等区域的加载场景，大尺寸适用于页面全屏加载场景。
demo

### 有包裹的加载

Loading 组件可以作为容器包裹需要显示加载状态的内容。
demo

### 有延时的加载

设置最短延迟响应时间，低于响应时间的操作不显示加载状态。
demo

### 全屏加载

全屏展示加载状态，阻止用户操作。
demo

## 组件设计指南

### 何时使用

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

### 与页面布局相关

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

<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) | 展示操作的当前进度时。                                                 |
