Spin

Used for the loading status of a page or a block.
Import
Source components/spin
Docs Edit this page

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.

      Loading...
Inside a container

Spin in a container.

      Loading...
Loading...
Alert message titleFurther details about the context of this alert.
Customized description

Customized description content.

      Loading...
Custom spinning indicator

Use custom loading indicator.

      Loading...
Size

A small Spin use in loading text, default Spin use in loading card-level block, and large Spin use in loading page.

      Loading...
Alert message titleFurther details about the context of this alert.

Loading state：
Embedded mode

Embedding content into nz-spin will alter it into loading state.

      Loading...
Alert message titleFurther 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.

      Loading...

API#

nz-spin#

PropertyDescriptionTypeDefault ValueGlobal Config
[nzDelay]specifies a delay in milliseconds for loading state (prevent flush), unit: millisecondsnumber-
[nzIndicator]the spinning indicatorTemplateRef<void>-✅
[nzSize]size of Spin'large' | 'small' | 'default''default'
[nzSpinning]whether Spin is spinningbooleantrue
[nzSimple]whether Spin has no childrenbooleanfalse
[nzTip]customize description content when Spin has childrenstring-