Spin

Used for the loading status of a page or a block.
Importimport{ Spin }from"antd";

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Loading state:

Embedding content into Spin will set it into loading state.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Loading state:

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Show the progress. When percent="auto" is set, an indeterminate progress will be displayed.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.18.0

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Loading
Loading
Loading
Loading...

Customize the description text.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Use custom loading indicator.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

The fullscreen mode is perfect for creating page loaders. It adds a dimmed overlay with a centered spinner.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

Common props ref:Common props

PropertyDescriptionTypeDefaultVersion
delaySpecifies a delay in milliseconds for loading state (prevent flush)number (milliseconds)-
fullscreenDisplay a backdrop with the Spin componentbooleanfalse5.11.0
indicatorReact node of the spinning indicatorReactNode-
percentThe progress percentage, when set to auto, it will be an indeterminate progressnumber | 'auto'-5.18.0
sizeThe size of Spin, options: small, default and largestringdefault
spinningWhether Spin is visiblebooleantrue
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.

Design Token

Component TokenHow to use?

Token NameDescriptionTypeDefault Value
contentHeightHeight of content areastring | number400
dotSizeLoading icon sizenumber20
dotSizeLGLarge loading icon sizenumber32
dotSizeSMSmall loading icon sizenumber14

Global TokenHow to use?