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

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

Use custom loading indicator.

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

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.

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

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

Embedding content into Spin will set 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);
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>
        <div style={{ marginTop: 16 }}>
          Loading state:
          <Switch checked={this.state.loading} onChange={this.toggle} />
        </div>
      </div>
    );
  }
}

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

API#

PropertyDescriptionTypeDefault
delaySpecifies a delay in milliseconds for loading state (prevent flush)number (milliseconds)-
indicatorReact node of the spinning indicatorReactNode-
sizeThe size of Spin, options: small, default and largestringdefault
spinningWhether Spin is spinningbooleantrue
tipCustomize description content when Spin has childrenReactNode-
wrapperClassNameThe className of wrapper when Spin has childrenstring-

Static Method#

  • Spin.setDefaultIndicator(indicator: ReactNode)

    You can define default spin element globally.