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

A simple loading status.

expand codeexpand code
      Loading...
    

Spin in a container.

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

Customized description content.

expand codeexpand code
      Loading...
    

Use custom loading indicator.

expand codeexpand code
      Loading...
    

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:

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:

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-