Spin 加载中

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

何时使用#

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

API#

参数	类型	默认值	说明
size	enum	default	spin组件中点的大小，可选值为 small default large
spining	boolean	true	用于内嵌其他组件的模式，可以关闭 loading 效果

代码演示

import { Spin } from 'antd';

ReactDOM.render(
  <Spin />
, mountNode);

基本用法

一个简单的 loading 状态。

import { Spin } from 'antd';

ReactDOM.render(
  <div className="example">
    <Spin />
  </div>
, mountNode);

.example {
  text-align: center;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}

容器

放入一个容器中。

import { Spin } from 'antd';

ReactDOM.render(
  <div>
    <Spin size="small" />
    <br />
    <Spin />
    <br />
    <Spin size="large" />
  </div>
, mountNode);

各种大小

小的用于文本加载，默认用于卡片容器级加载，大的用于页面级加载。

import { Spin, Switch, Alert } from 'antd';

const Card = React.createClass({
  getInitialState() {
    return {
      loading: false
    };
  },
  toggle(value) {
    this.setState({
      loading: value
    });
  },
  render() {
    const container = (
      <Alert message="消息提示的文案"
        description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
        type="info" />
    );
    return (
      <div>
        <Spin spining={this.state.loading}>{container}</Spin>
        切换加载状态：<Switch checked={this.state.loading} onChange={this.toggle} />
      </div>
    );
  }
});

ReactDOM.render(<Card />, mountNode);

.card-example {
  border-radius: 4px;
  padding: 24px;
  height: 100px;
  border: 1px solid #e9e9e9;
  background: url(https://t.alipayobjects.com/images/rmsweb/T10_NiXeRcXXXXXXXX.png);
  margin-bottom: 16px;
}

卡片加载中

可以直接把内容内嵌到 Spin 中，将现有容器变为加载状态。