Spin加载中

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

基本用法

一个简单的 loading 状态。

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

自定义描述文案

自定义描述文案。

import { Spin, Alert } from 'antd';
ReactDOM.render(
  <Spin tip="Loading...">
    <Alert
      message="Alert message title"
      description="Further details about the context of this alert."
      type="info"
    />
  mountNode,
);

使用自定义指示符。

各种大小

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

import { Spin } from 'antd';
ReactDOM.render(
    <Spin size="small" />
    <Spin />
    <Spin size="large" />
  </div>,
  mountNode,
);

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

延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束，则不显示 loading 状态。

import { Spin, Alert, Switch } from 'antd';
class Card extends React.Component {
  state = { loading: false };
  toggle = value => {
    this.setState({ loading: value });
  };
    const container = (
      <Alert
        message="Alert message title"
        description="Further details about the context of this alert."
      />
    );
    return (
      <div>
        <Spin spinning={this.state.loading} delay={500}>
          {container}
        </Spin>
        <div style={{ marginTop: 16 }}>
          Loading state：
          <Switch checked={this.state.loading} onChange={this.toggle} />
        </div>
      </div>
    );
  }
}

• Spin.setDefaultIndicator(indicator: ReactElement)同上 indicator，你可以自定义全局默认元素