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 codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-spin-basic',
  template: `
    <nz-spin nzSimple></nz-spin>
  `
})
export class NzDemoSpinBasicComponent {}

Spin in a container.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-spin-inside',
  template: `
    <div class="example">
      <nz-spin nzSimple></nz-spin>
    </div>
  `,
  styles: [
    `
      .example {
        text-align: center;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        margin-bottom: 20px;
        padding: 30px 50px;
        margin: 20px 0;
      }
    `
  ]
})
export class NzDemoSpinInsideComponent {}
Loading...
Alert message titleFurther details about the context of this alert.

Customized description content.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-spin-tip',
  template: `
    <nz-spin nzTip="Loading...">
      <nz-alert
        nzType="info"
        nzMessage="Alert message title"
        nzDescription="Further details about the context of this alert."
      >
      </nz-alert>
    </nz-spin>
  `
})
export class NzDemoSpinTipComponent {}

Use custom loading indicator.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-spin-custom-indicator',
  template: `
    <ng-template #indicatorTemplate><i nz-icon type="loading" style="font-size: 24px;"></i> </ng-template>
    <nz-spin nzSimple [nzIndicator]="indicatorTemplate"> </nz-spin>
  `
})
export class NzDemoSpinCustomIndicatorComponent {}

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
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-spin-size',
  template: `
    <nz-spin nzSimple [nzSize]="'small'"></nz-spin>
    <nz-spin nzSimple></nz-spin>
    <nz-spin nzSimple [nzSize]="'large'"></nz-spin>
  `,
  styles: [
    `
      nz-spin {
        display: inline-block;
        margin-right: 16px;
      }
    `
  ]
})
export class NzDemoSpinSizeComponent {}
Alert message titleFurther details about the context of this alert.
Loading state:

Embedding content into Spin will alter it into loading state.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-spin-nested',
  template: `
    <nz-spin [nzSpinning]="isSpinning">
      <nz-alert
        [nzType]="'info'"
        [nzMessage]="'Alert message title'"
        [nzDescription]="'Further details about the context of this alert.'"
      >
      </nz-alert>
    </nz-spin>
    <div style="margin-top:8px;">
      Loading state:
      <nz-switch [(ngModel)]="isSpinning"></nz-switch>
    </div>
  `
})
export class NzDemoSpinNestedComponent {
  isSpinning = false;
}
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.

.example {
  text-align: center;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}
expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-spin-delayAndDebounce',
  template: `
    <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500">
      <nz-alert
        [nzType]="'info'"
        [nzMessage]="'Alert message title'"
        [nzDescription]="'Further details about the context of this alert.'"
      >
      </nz-alert>
    </nz-spin>
    <div style="margin-top:8px;">
      Loading state:
      <nz-switch [(ngModel)]="isSpinning"></nz-switch>
    </div>
  `
})
export class NzDemoSpinDelayAndDebounceComponent {
  isSpinning = false;
}

API#

Import this Component Individually#

You can get more detail here.

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

nz-spin#

PropertyDescriptionTypeDefault Value
[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-