ant-design/components/spin/index.en-US.md

category, group, title, description, cover, coverDark, demo

category	group	title	description	cover	coverDark	demo
Components	Feedback	Spin	Used for the loading status of a page or a block.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5mC5TomY4B0AAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*i43_ToFrL8YAAAAAAAAAAAAADrJ8AQ/original	cols 2

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 Size Embedded mode Customized description Delay Custom spinning indicator Progress Custom semantic dom styling Fullscreen

API

Common props ref：Common props

Property	Description	Type	Default	Version
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>	-
delay	Specifies a delay in milliseconds for loading state (prevent flush)	number (milliseconds)	-
fullscreen	Display a backdrop with the Spin component	boolean	false	5.11.0
indicator	React node of the spinning indicator	ReactNode	-
percent	The progress percentage, when set to auto, it will be an indeterminate progress	number | 'auto'	-	5.18.0
size	The size of Spin, options: small, default and large	string	default
spinning	Whether Spin is visible	boolean	true
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties>	-
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.

Semantic DOM

default

fullscreen

Design Token