---
title: Loading - 加载中
order: 11
path: /spin
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 6
  title: 反馈组件
  path: /feedback
---

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

## 图标加载

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

<code src="./demos/basic.tsx"/>

## 文字加载

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

<code src="./demos/text.tsx"/>

## 文字和图标组合加载

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

<code src="./demos/tip.tsx"/>

## 不同尺寸的加载

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

<code src="./demos/size.tsx"/>

## 容器中的加载

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

<code src="./demos/inside.tsx"/>

## API

| 参数             | 说明                                         | 类型          | 默认值    |
| ---------------- | -------------------------------------------- | ------------- | --------- |
| delay            | 延迟显示加载效果的时间（防止闪烁）           | number (毫秒) | -         |
| indicator        | 加载指示符                                   | ReactNode     | -         |
| size             | 组件大小，可选值为 `small` `default` `large` | string        | `default` |
| spinning         | 是否为加载中状态                             | boolean       | true      |
| tip              | 当作为包裹元素时，可以自定义描述文案         | ReactNode     | 加载中    |
| wrapperClassName | 包装器的类属性                               | string        | -         |
| onlyText         | 只显示文案                                   | boolean       | -         |
| direction        | tip 的现实方向                               | horizontal    | -         |

### 静态方法

- `Spin.setDefaultIndicator(indicator: ReactNode)`

  你可以自定义全局默认 Spin 的元素。