Spin加载中

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

何时使用#

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

代码演示

一个简单的 loading 状态。

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

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

放入一个容器中。

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.

自定义描述文案。

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

使用自定义指示符。

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

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

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:

可以直接把内容内嵌到 Spin 中,将现有容器变为加载状态。

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:

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

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 { NzSpinModule } from 'ng-zorro-antd';

nz-spin#

参数说明类型默认值
[nzDelay]延迟显示加载效果的时间(防止闪烁),单位:毫秒number-
[nzIndicator]加载指示符TemplateRef<void>-
[nzSize]组件大小'large'|'small'|'default''default'
[nzSpinning]是否旋转booleantrue
[nzSimple]是否包裹元素booleanfalse
[nzTip]当作为包裹元素时,可以自定义描述文案string-