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.

TypeScript
JavaScript
import { Spin } from 'antd';
import React from 'react';

const App: React.FC = () => <Spin />;

export default App;

Inside a container

Spin in a container.

TypeScript
JavaScript
import { Spin } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <div className="example">
    <Spin />
  </div>
);

export default App;
.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.

TypeScript
JavaScript
import { Alert, Spin } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Spin tip="Loading...">
    <Alert
      message="Alert message title"
      description="Further details about the context of this alert."
      type="info"
    />
  </Spin>
);

export default App;

Custom spinning indicator

Use custom loading indicator.

TypeScript
JavaScript
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
import React from 'react';

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

const App: React.FC = () => <Spin indicator={antIcon} />;

export default App;

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.

TypeScript
JavaScript
import { Space, Spin } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Space size="middle">
    <Spin size="small" />
    <Spin />
    <Spin size="large" />
  </Space>
);

export default App;

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.

TypeScript
JavaScript
import { Alert, Spin, Switch } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const toggle = (checked: boolean) => {
    setLoading(checked);
  };

  return (
    <div>
      <Spin spinning={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={loading} onChange={toggle} />
      </div>
    </div>
  );
};

export default App;

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.

TypeScript
JavaScript
import { Alert, Spin, Switch } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const toggle = (checked: boolean) => {
    setLoading(checked);
  };
  const container = (
    <Alert
      message="Alert message title"
      description="Further details about the context of this alert."
      type="info"
    />
  );

  return (
    <div>
      <Spin spinning={loading} delay={500}>
        {container}
      </Spin>
      <div style={{ marginTop: 16 }}>
        Loading state：
        <Switch checked={loading} onChange={toggle} />
      </div>
    </div>
  );
};

export default App;

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 visible	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.