AntDesign UI组件-局部加载效果Spin

1.简单的使用一下

新建用于展示局部加载效果Spin的页面UiSpin.js
代码：

/**
 * AntDesign UI 局部加载效果Spin示例
 */
import React from 'react'
import {Card, Spin, Icon} from 'antd'

class UiSpin extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <Card title="Spin示例">
          <Spin size={"small"}></Spin>
          <Spin/>
          <Spin size={"large"}></Spin>
        </Card>
      </div>
    )

  }

}

export default UiSpin;

效果：

2.在信息框Alert上加载效果

只需要将要被加载的内容放在中即可
代码：

/**
 * AntDesign UI 局部加载效果Spin示例
 */
import React from 'react'
import {Card, Spin, Icon, Alert} from 'antd'

class UiSpin extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    //使用我们自定义的Icon,使用type给Icon指定一个图标，为一个圆圈
    const loadingIcon = <Icon type="loading" style={{fontSize:24}}/>

    return (
      <div>
        <Card title="Spin示例">
          <Spin size={"small"}></Spin>
          <Spin/>
          <Spin size={"large"}></Spin>

          {/*通过indicator指定局部加载效果的图标*/}
          <Spin indicator={loadingIcon}></Spin>
        </Card>

        <Card title="内容遮罩-信息框Alert">
          <Alert message="信息框Alert"
                 description="这是信息框Aleat的description"
                 type="info" />
          <Alert message="警告框Alert"
                 description="这是警告框Aleat的description"
                 type="warning" />
        </Card>

        <Card title="内容遮罩-信息框Alert-加载效果">
          <Spin>
            <Alert message="信息框Alert"
                   description="这是信息框Aleat的description"
                   type="info" />
          </Spin>
          <Spin tip="加载中...">
            <Alert message="信息框Alert"
                   description="这是信息框Aleat的description"
                   type="info" />
          </Spin>
        </Card>
      </div>
    )

  }

}

export default UiSpin;

效果：