---
name: Loading 加载
route: /loading
menu: 交互组件
---

import { Playground } from 'docz';
import Loading from './index';
import Button from '../button/index';

## 演示

### 简单示例

<Playground>
  <Loading />
</Playground>

### 带文字

<Playground>
  <Loading label="Loading" />
</Playground>

垂直排列：`vertical: boolean`

<Playground>
  <Loading label="加载中" vertical />
</Playground>

### Loading.Wrap

<Playground>
  {() => {
    const [loading, changeLoading] = React.useState(false);
    return (
      <>
        <Button onClick={() => changeLoading(!loading)}>
          Toggle Loading
        </Button>
        <Loading.Wrap style={{ width: '300px' }} loading={loading}>
          <div>
            filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
            CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter element)。
          </div>
        </Loading.Wrap>
      </>
    );
  }}
</Playground>

## API

### LoadingProps

| 参数 | 类型 | 默认值 | 说明 |
|-----|------|-------|-----|
| color | `string` | `currentColor` | 颜色 |
| colorType | `default`, `primary`, `success`, `warning`, `error` | `default` | 内置的颜色类型 |
| size | `string`, `number` | `1em` | 尺寸 |
| label | `React.ReactNode` | - | 标签 |
| vertical | `boolean` | `false` | 是否垂直排列 |
| className | `string` | - | 类名 |
| style | `React.CSSProperties` | - | 样式 |

### Loading.Wrap Props

| 参数 | 类型 | 默认值 | 说明 |
|-----|------|-------|-----|
| loading | `boolean` | `false` | 是否加载中 |
| mask | `boolean` | `true` | 是否显示蒙层 |
| className | `string` | - | 类名 |
| style | `React.CSSProperties` | - | 样式 |