Spin

A spinner for displaying loading state of a page or a section.

When To Use#

When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.

Examples

basic Usage

A simple loading status.

import { Spin } from 'antd';

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

Inside a container

Spin in a container.

import { Spin } from 'antd';

ReactDOM.render(
  <div className="example">
    <Spin />
  </div>,
  mountNode,
);
.example {
  margin: 20px 0;
  margin-bottom: 20px;
  padding: 30px 50px;
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

Alert message title

Further details about the context of this alert.

Customized description

Customized description content.

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,
);

Custom spinning indicator

Use custom loading indicator.

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

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

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

Size

A small Spin is used for loading text, default sized Spin for loading a card-level block, and large Spin used for loading a page.

import { Spin, Space } from 'antd';

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

Alert message title

Further details about the context of this alert.

Loading state：

Embedded mode

Embedding content into Spin will set it into loading state.

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);

Alert message title

Further details about the context of this alert.

Loading state：

delay

Specifies a delay for loading state. If spinning ends during delay, loading status won't appear.

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#

Property	Description	Type	Default
delay	Specifies a delay in milliseconds for loading state (prevent flush)	number (milliseconds)	-
indicator	React node of the spinning indicator	ReactNode	-
size	The size of Spin, options: `small`, `default` and `large`	string	`default`
spinning	Whether Spin is spinning	boolean	true
tip	Customize description content when Spin has children	ReactNode	-
wrapperClassName	The className of wrapper when Spin has children	string	-

Static Method#

Spin.setDefaultIndicator(indicator: ReactNode)
You can define default spin element globally.