---
title: WkLoading 加载
group:
  title: 反馈组件
  path: /feedback/
---

## 何时使用

WKLoading 加载状态组件，用于页面信息加载过程中展示的效果

- 在 组件库 中，我们提供了默认的 loading 效果，还提供了以下自定义功能。
- icon：插槽自定义 loading 的 icon。
- message loading 的描述语。

## 基础使用

```tsx
/**
 * title: 基础使用
 * desc: 基础使用
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKLoading } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper title="基础使用">
      <WKLoading></WKLoading>
    </PageWrapper>
  );
};
```

## 添加 loading 描述

```tsx
/**
 * title: 添加loading描述
 * desc: 添加loading描述
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKLoading } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper title="添加loading描述">
      <WKLoading message="加载中。。。"></WKLoading>
    </PageWrapper>
  );
};
```

## 自定义 icon

```tsx
/**
 * title: 自定义icon
 * desc: 自定义icon
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKLoading, WKImage } from '@wakeapp/components';
import loading from './loading.gif';

export default () => {
  return (
    <PageWrapper title="自定义icon">
      <WKLoading icon={<WKImage src={loading} width={200} heightAuto></WKImage>}></WKLoading>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKLoading/index.d.ts'></API>
