Spin加载中

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

何时使用#

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

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

代码演示

基本用法

一个简单的 loading 状态。

expand codeexpand code
      加载中
容器

放入一个容器中。

expand codeexpand code
      加载中
Loading...
Alert message titleFurther details about the context of this alert.
自定义描述文案

自定义描述文案。

expand codeexpand code
      加载中
自定义指示符

使用自定义指示符。

expand codeexpand code
      加载中
各种大小

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

expand codeexpand code
      加载中
Alert message titleFurther details about the context of this alert.

Loading state：
卡片加载中

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

expand codeexpand code
      加载中
Alert message titleFurther details about the context of this alert.

Loading state：
延迟

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

expand codeexpand code
      加载中

API#

nz-spin#

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