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

A simple loading status.

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

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

Spin in a container.

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...
Alert message titleFurther details about the context of this alert.

Customized description content.

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

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

expand codeexpand code
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:

Embedding content into Spin will alter it into loading state.

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);
Alert message titleFurther details about the context of this alert.
Loading state:

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

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>
        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#

PropertyDescriptionTypeDefault Value
sizesize of Spin, options: small, default and largestringdefault
spinningwhether Spin is spinningbooleantrue
tipcustomize description content when Spin has childrenstring-
delayspecifies a delay in milliseconds for loading state (prevent flush)number (milliseconds)-
wrapperClassNameclassName of wrapper when Spin has childrenstring-