Spin加载中

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

何时使用

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

代码演示

Spin加载中 - 图1

基本用法

一个简单的 loading 状态。

  1. import { Spin } from 'antd';
  2. ReactDOM.render(<Spin />, mountNode);

Spin加载中 - 图2

容器

放入一个容器中。

  1. import { Spin } from 'antd';
  2. ReactDOM.render(
  3. <div className="example">
  4. <Spin />
  5. </div>,
  6. mountNode,
  7. );
  1. .example {
  2. text-align: center;
  3. background: rgba(0, 0, 0, 0.05);
  4. border-radius: 4px;
  5. margin-bottom: 20px;
  6. padding: 30px 50px;
  7. margin: 20px 0;
  8. }

Spin加载中 - 图3

自定义描述文案

自定义描述文案。

  1. import { Spin, Alert } from 'antd';
  2. ReactDOM.render(
  3. <Spin tip="Loading...">
  4. <Alert
  5. message="Alert message title"
  6. description="Further details about the context of this alert."
  7. type="info"
  8. />
  9. </Spin>,
  10. mountNode,
  11. );

Spin加载中 - 图4

自定义指示符

使用自定义指示符。

  1. import { Spin } from 'antd';
  2. import { LoadingOutlined } from '@ant-design/icons';
  3. const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
  4. ReactDOM.render(<Spin indicator={antIcon} />, mountNode);

Spin加载中 - 图5

各种大小

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

  1. import { Spin } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Spin size="small" />
  5. <Spin />
  6. <Spin size="large" />
  7. </div>,
  8. mountNode,
  9. );

Spin加载中 - 图6

卡片加载中

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

  1. import { Spin, Switch, Alert } from 'antd';
  2. class Card extends React.Component {
  3. state = { loading: false };
  4. toggle = value => {
  5. this.setState({ loading: value });
  6. };
  7. render() {
  8. return (
  9. <div>
  10. <Spin spinning={this.state.loading}>
  11. <Alert
  12. message="Alert message title"
  13. description="Further details about the context of this alert."
  14. type="info"
  15. />
  16. </Spin>
  17. <div style={{ marginTop: 16 }}>
  18. Loading state
  19. <Switch checked={this.state.loading} onChange={this.toggle} />
  20. </div>
  21. </div>
  22. );
  23. }
  24. }
  25. ReactDOM.render(<Card />, mountNode);

Spin加载中 - 图7

延迟

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

  1. import { Spin, Alert, Switch } from 'antd';
  2. class Card extends React.Component {
  3. state = { loading: false };
  4. toggle = value => {
  5. this.setState({ loading: value });
  6. };
  7. render() {
  8. const container = (
  9. <Alert
  10. message="Alert message title"
  11. description="Further details about the context of this alert."
  12. type="info"
  13. />
  14. );
  15. return (
  16. <div>
  17. <Spin spinning={this.state.loading} delay={500}>
  18. {container}
  19. </Spin>
  20. <div style={{ marginTop: 16 }}>
  21. Loading state
  22. <Switch checked={this.state.loading} onChange={this.toggle} />
  23. </div>
  24. </div>
  25. );
  26. }
  27. }
  28. ReactDOM.render(<Card />, mountNode);

API

参数说明类型默认值
delay延迟显示加载效果的时间(防止闪烁)number (毫秒)-
indicator加载指示符ReactNode-
size组件大小,可选值为 small default largestring'default'
spinning是否为加载中状态booleantrue
tip当作为包裹元素时,可以自定义描述文案string-
wrapperClassName包装器的类属性string-

静态方法

  • Spin.setDefaultIndicator(indicator: ReactNode)

你可以自定义全局默认 Spin 的元素。