Package Exports

@uiw/react-loader
@uiw/react-loader/cjs/index.js
@uiw/react-loader/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Loader 加载器

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

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

基础实例

import React from 'react';
import { Loader } from "uiw";

function Demo() {
  return <div>
    <Loader size="small" />
    <Loader />
    <Loader size="large" />
  </div>
}

export default Demo

警告提示中加载

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

卡片加载中

import React from 'react';
import { Loader, Card, Col, Row } from "uiw";

function Demo() {
  return <Row gutter={10}>
    <Col fixed>
      <Card
        title="图标与文字一行显示"
        extra={<a href="#">更多</a>}
        style={{ minWidth: 230 }}
      >
        <Loader color="red" tip="加载中..." style={{ width: "100%" }}>
          <div>
            卡片内容
            <br />
            卡片内容
            <br />
            卡片内容
            <br />
          </div>
        </Loader>
      </Card>
    </Col>
    <Col fixed>
      <Card
        title="图标与文字垂直显示"
        extra={<a href="#">更多</a>}
        style={{ minWidth: 230 }}
      >
        <Loader tip="loading..." vertical style={{ width: "100%" }}>
          <div>
            卡片内容
            <br />
            卡片内容
            <br />
            卡片内容
            <br />
          </div>
        </Loader>
      </Card>
    </Col>
    <Col fixed>
      <Card
        title="自定义背景颜色"
        extra={<a href="#">更多</a>}
        style={{ minWidth: 230 }}
      >
        <Loader
          bgColor="rgba(0, 0, 0, 0.4)"
          color="#fff"
          tip="loading..."
          vertical
          style={{ width: "100%" }}
        >
          <div>
            卡片内容
            <br />
            卡片内容
            <br />
            卡片内容
            <br />
          </div>
        </Loader>
      </Card>
    </Col>
  </Row>
}
export default Demo

自定义加载图标动画

import React from 'react';
import { Loader, Card, Icon } from "uiw";

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>
}

export default Demo

整页加载

页面数据加载时显示。

import React from 'react';
import { Loader, Icon, Button } from "uiw";

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      fullscreen: false,
    };
  }
  render() {
    return (
      <div>
        <Button
          style={{ marginBottom: 10 }}
          type="primary"
          onClick={() => {
            this.setState(
              {
                fullscreen: !this.state.fullscreen,
              },
              () => {
                setTimeout(() => {
                  this.setState({
                    fullscreen: !this.state.fullscreen,
                  });
                }, 3000);
              }
            );
          }}
        >
          显示整页加载，3 秒后消失
        </Button>
        {this.state.fullscreen && (
          <Loader
            tip="加载中..."
            size="large"
            bgColor="rgba(255, 255, 255, 0.9)"
            fullscreen={this.state.fullscreen}
          />
        )}
      </div>
    );
  }
}

export default Demo

Props

参数	说明	类型	默认值
size	尺寸	Enum{`small`, `default`, `large`}	`default`
loading	是否旋转	Boolean	`true`
indicator	加载指示符，可以加载一个 Icon 动画	ReactNode	-
tip	当作为包裹元素时，可以自定义描述文案	String	-
color	设置图标与文字的颜色	String	-
vertical	图标与文字垂直显示	Boolean	-
bgColor	自定义背景颜色	String	-
fullscreen	是否全屏显示	Boolean	`false`