Spin加载中

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" style="font-size: 24px;"></i> </ng-template>
    <nz-spin nzSimple [nzIndicator]="indicatorTemplate"> </nz-spin>
  `
})
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 {}

卡片加载中

可以直接把内容内嵌到 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>
    <div style="margin-top:8px;">
      Loading state：
      <nz-switch [(ngModel)]="isSpinning"></nz-switch>
    </div>
  `
})
export class NzDemoSpinNestedComponent {
  isSpinning = false;
}

延迟

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

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

nz-spincomponent

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