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.

import { NzSpinModule } from 'ng-zorro-antd/spin';

Examples

Basic Usage

A simple loading status.

expand codeexpand code
      Loading...
Inside a container

Spin in a container.

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

Customized description content.

expand codeexpand code
      Loading...
Custom spinning indicator

Use custom loading indicator.

expand codeexpand code
      Loading...
Size

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

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

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

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