logo

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 code expand code

Spin in a container.

expand code expand code

Customized description content.

expand code expand code

Use custom loading indicator.

expand code expand code

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 code expand code

Embedding content into Spin will set it into loading state.

expand code expand code

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

expand code expand code

Spin API#

Property Description Type Default Value
Size ParameterSize of the spinner. Possible values: small, default, large String default
Tip ParameterCustomize description content when Spin has children String --
Delay ParameterSpecifies a delay in milliseconds for loading state (prevent flush) Int32 0
Spinning ParameterWhether spin is active Boolean true
WrapperClassName ParameterClass name for the wrapper String --
Indicator ParameterCustom display for the spinning indicator RenderFragment --
ChildContent ParameterContent the spin will indicate loading for RenderFragment --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --
Skeleton Watermark
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.