Spin加载中

用于页面和区块的加载中状态。

何时使用

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

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

代码演示

基本用法

一个简单的 loading 状态。

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

容器

放入一个容器中。

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 {}

自定义描述文案

自定义描述文案。

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 {}

自定义指示符

使用自定义指示符。

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

各种大小

小的用于文本加载，默认用于卡片容器级加载，大的用于页面级加载。

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 {}

卡片加载中

可以直接把内容内嵌到 nz-spin 中，将现有容器变为加载状态。

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>
    <br />
    <div>
      Loading state：
      <nz-switch [(ngModel)]="isSpinning"></nz-switch>
    </div>
  `
})
export class NzDemoSpinNestedComponent {
  isSpinning = false;
}

延迟

延迟显示 loading 效果。当 spinning 状态在 nzDelay 时间内结束，则不显示 loading 状态。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-spin-delay-and-debounce',
  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>
    <br />
    <div>
      Loading state：
      <nz-switch [(ngModel)]="isSpinning"></nz-switch>
    </div>
  `
})
export class NzDemoSpinDelayAndDebounceComponent {
  isSpinning = false;
}

API

nz-spincomponent