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 {
  text-align: center;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}

Alert message titleFurther 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);

Size

A small Spin use in loading text, default Spin use in loading card-level block, and large Spin use in loading page.

import { Spin } from 'antd';

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

Alert message titleFurther details about the context of this alert.

Loading state：

Embedded mode

Embedding content into Spin will alter 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 titleFurther 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>
        Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
      </div>
    );
  }
}

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

API#

Property	Description	Type	Default Value
size	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	string	-
delay	specifies a delay in milliseconds for loading state (prevent flush)	number (milliseconds)	-
wrapperClassName	className of wrapper when Spin has children	string	-

Components

Spin

When To Use#

Examples

API#