Spin加载中

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

何时使用

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

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

代码演示

Spin加载中 - 图1

基本用法

一个简单的 loading 状态。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-spin-basic',
  4. template: `
  5. <nz-spin nzSimple></nz-spin>
  6. `
  7. })
  8. export class NzDemoSpinBasicComponent {}

Spin加载中 - 图2

容器

放入一个容器中。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-spin-inside',
  4. template: `
  5. <div class="example">
  6. <nz-spin nzSimple></nz-spin>
  7. </div>
  8. `,
  9. styles: [
  10. `
  11. .example {
  12. text-align: center;
  13. background: rgba(0, 0, 0, 0.05);
  14. border-radius: 4px;
  15. margin-bottom: 20px;
  16. padding: 30px 50px;
  17. margin: 20px 0;
  18. }
  19. `
  20. ]
  21. })
  22. export class NzDemoSpinInsideComponent {}

Spin加载中 - 图3

自定义描述文案

自定义描述文案。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-spin-tip',
  4. template: `
  5. <nz-spin nzTip="Loading...">
  6. <nz-alert nzType="info" nzMessage="Alert message title" nzDescription="Further details about the context of this alert."> </nz-alert>
  7. </nz-spin>
  8. `
  9. })
  10. export class NzDemoSpinTipComponent {}

Spin加载中 - 图4

自定义指示符

使用自定义指示符。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-spin-custom-indicator',
  4. template: `
  5. <ng-template #indicatorTemplate><i nz-icon nzType="loading"></i></ng-template>
  6. <nz-spin nzSimple [nzIndicator]="indicatorTemplate"> </nz-spin>
  7. `,
  8. styles: [
  9. `
  10. i {
  11. font-size: 24px;
  12. }
  13. `
  14. ]
  15. })
  16. export class NzDemoSpinCustomIndicatorComponent {}

Spin加载中 - 图5

各种大小

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-spin-size',
  4. template: `
  5. <nz-spin nzSimple [nzSize]="'small'"></nz-spin>
  6. <nz-spin nzSimple></nz-spin>
  7. <nz-spin nzSimple [nzSize]="'large'"></nz-spin>
  8. `,
  9. styles: [
  10. `
  11. nz-spin {
  12. display: inline-block;
  13. margin-right: 16px;
  14. }
  15. `
  16. ]
  17. })
  18. export class NzDemoSpinSizeComponent {}

Spin加载中 - 图6

卡片加载中

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-spin-nested',
  4. template: `
  5. <nz-spin [nzSpinning]="isSpinning">
  6. <nz-alert [nzType]="'info'" [nzMessage]="'Alert message title'" [nzDescription]="'Further details about the context of this alert.'">
  7. </nz-alert>
  8. </nz-spin>
  9. <br />
  10. <div>
  11. Loading state:
  12. <nz-switch [(ngModel)]="isSpinning"></nz-switch>
  13. </div>
  14. `
  15. })
  16. export class NzDemoSpinNestedComponent {
  17. isSpinning = false;
  18. }

Spin加载中 - 图7

延迟

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-spin-delay-and-debounce',
  4. template: `
  5. <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500">
  6. <nz-alert [nzType]="'info'" [nzMessage]="'Alert message title'" [nzDescription]="'Further details about the context of this alert.'">
  7. </nz-alert>
  8. </nz-spin>
  9. <br />
  10. <div>
  11. Loading state:
  12. <nz-switch [(ngModel)]="isSpinning"></nz-switch>
  13. </div>
  14. `
  15. })
  16. export class NzDemoSpinDelayAndDebounceComponent {
  17. isSpinning = false;
  18. }

API

nz-spincomponent

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