Spin加载中

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

何时使用#

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

代码演示

一个简单的 loading 状态。

expand codeexpand code
import { Spin } from 'antd';

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

放入一个容器中。

expand codeexpand code
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;
}
Loading...

自定义描述文案。

expand codeexpand code
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"
    />
  </Spin>,
  mountNode,
);

使用自定义指示符。

expand codeexpand code
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';

const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

ReactDOM.render(<Spin indicator={antIcon} />, mountNode);

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

expand codeexpand code
import { Spin, Space } from 'antd';

ReactDOM.render(
  <Space size="middle">
    <Spin size="small" />
    <Spin />
    <Spin size="large" />
  </Space>,
  mountNode,
);
Loading state:

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

expand codeexpand code
import { Spin, Switch, Alert } from 'antd';

class Card extends React.Component {
  state = { loading: false };

  toggle = value => {
    this.setState({ loading: value });
  };

  render() {
    return (
      <div>
        <Spin spinning={this.state.loading}>
          <Alert
            message="Alert message title"
            description="Further details about the context of this alert."
            type="info"
          />
        </Spin>
        <div style={{ marginTop: 16 }}>
          Loading state:
          <Switch checked={this.state.loading} onChange={this.toggle} />
        </div>
      </div>
    );
  }
}

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

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

expand codeexpand code
import { Spin, Alert, Switch } from 'antd';

class Card extends React.Component {
  state = { loading: false };

  toggle = value => {
    this.setState({ loading: value });
  };

  render() {
    const container = (
      <Alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    );
    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>
    );
  }
}

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

API#

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

静态方法#

  • Spin.setDefaultIndicator(indicator: ReactNode)

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

Skeleton骨架屏Anchor锚点