Loader 加载器

用于页面和区块的加载中状态。

import { Loader } from 'uiw';
// or
import Loader from '@uiw/react-loader';

基础实例

```jsx mdx:preview&bg=#fff import React from 'react'; import { Loader } from "uiw";

export default function Demo() { return (

### 警告提示中加载

```jsx mdx:preview&bg=#fff
import React, { Component } from 'react';
import { Loader, Row, Col, Message, Icon, Button } from "uiw";

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
    };
  }
  render() {
    return (
      <div>
        <Row gutter={10}>
          <Col>
            <Button
              style={{ marginBottom: 10 }}
              size="small"
              onClick={() => {
                this.setState({
                  loading: !this.state.loading,
                });
              }}
            >
              点击切换加载状态
            </Button>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col fixed>
            <Loader loading={this.state.loading}>
              <Message
                type="success"
                title="成功提示标题"
                description={
                  <span>
                    <Icon
                      type="uiw"
                      verticalAlign="baseline"
                      style={{ fill: "#009688" }}
                    />
                    这里是成功提示详情描述。
                  </span>
                }
              />
            </Loader>
          </Col>
          <Col fixed>
            <Loader loading={this.state.loading}>
              <Message
                type="warning"
                title="成功提示标题"
                description="这里是成功提示详情描述。"
              />
            </Loader>
          </Col>
        </Row>
      </div>
    );
  }
}
export default Demo;

卡片加载中

```jsx mdx:preview&bg=#fff import React from 'react'; import { Loader, Card, Col, Row } from "uiw";

export default function Demo() { return ( <Row gutter={10}> <Card title="图标与文字一行显示" extra={更多} style={{ minWidth: 230 }} > <Loader color="red" tip="加载中..." style={{ width: "100%" }}>

### 自定义加载图标动画

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Loader, Card, Icon } from "uiw";

export default function Demo() {
  return (
    <div>
      <Card title="Card标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
        <Loader
          tip="加载中..."
          color="red"
          indicator={
            <Icon
              type="loading"
              spin={true}
              style={{ verticalAlign: "text-top" }}
            />
          }
          style={{ width: "100%" }}
        >
          <div>
            卡片内容
            <br />
            卡片内容
            <br />
            卡片内容
            <br />
          </div>
        </Loader>
      </Card>
    </div>
  );
}

整页加载

页面数据加载时显示。

```jsx mdx:preview&bg=#fff import React from 'react'; import { Loader, Icon, Button } from "uiw";

class Demo extends React.Component { constructor() { super(); this.state = { fullscreen: false, }; } render() { return (

export default Demo; ```

Props