A spinner for displaying loading state of a page or a section.
When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
A simple loading status.
import React from 'react';
import { Spin } from 'antd';
const App: React.FC = () => <Spin />;
export default App;
Spin in a container.
import React from 'react';
import { Spin } from 'antd';
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;
}import React from 'react';
import { Alert, Space, Spin } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<Space>
<Spin tip="Loading" size="small">
<div className="content" />
</Spin>
<Spin tip="Loading">
<div className="content" />
</Spin>
<Spin tip="Loading" size="large">
<div className="content" />
</Spin>
</Space>
<Spin tip="Loading...">
<Alert
message="Alert message title"
description="Further details about the context of this alert."
type="info"
/>
</Spin>
</Space>
);
export default App;
.content {
padding: 50px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}Use custom loading indicator.
import React from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const App: React.FC = () => <Spin indicator={antIcon} />;
export default App;
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 React from 'react';
import { Space, Spin } from 'antd';
const App: React.FC = () => (
<Space size="middle">
<Spin size="small" />
<Spin />
<Spin size="large" />
</Space>
);
export default App;
Embedding content into Spin will set it into loading state.
import React, { useState } from 'react';
import { Alert, Spin, Switch } from 'antd';
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;
Specifies a delay for loading state. If spinning ends during delay, loading status won't appear.
import React, { useState } from 'react';
import { Alert, Spin, Switch } from 'antd';
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;
| 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 | - |
Spin.setDefaultIndicator(indicator: ReactNode)
You can define default spin element globally.