loading 加载指示符

全局加载指示符，一般用于某个操作需要中断用户操作。

  1. import { LoadingModule } from '@delon/abc/loading';

代码演示

loading 加载指示符 - 图1

基础

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { LoadingService, LoadingType } from '@delon/abc/loading';
  4. @Component({
  5.   selector: 'components-loading-basic',
  6.   template: `
  7.     <button nz-button (click)="show('icon')">Icon</button>
  8.     <button nz-button (click)="show('spin')">Spin</button>
  9.     <button nz-button (click)="show('text')">Only Text</button>
  10.   `,
  11. })
  12. export class ComponentsLoadingBasicComponent {
  13.   constructor(private loadingSrv: LoadingService) { }
  15.   show(type: LoadingType): void {
  16.     this.loadingSrv.open({ type });
  18.     setTimeout(() => this.loadingSrv.close(), 1000 * 3);
  19.   }
  20. }

loading 加载指示符 - 图2

自定义图标

设置 type: 'custom' 自定义加载指示符图标。

  1. import { DomSanitizer } from '@angular/platform-browser';
  2. import { Component } from '@angular/core';
  3. import { LoadingService } from '@delon/abc/loading';
  5. @Component({
  6.   selector: 'components-loading-custom',
  7.   template: `
  8.     <button *ngFor="let i of customs" nz-button (click)="show(i)">{{ i.name }}</button>
  9.   `,
  10. })
  11. export class ComponentsLoadingCustomComponent {
  12.   customs = [
  13.     {
  14.       name: 'Balls',
  15.       style: {
  16.         height: '40px',
  17.         fill: '#1890ff',
  18.       },
  19.       html: this.dom.bypassSecurityTrustHtml(`
  20.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  21.         <path transform="translate(-8 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
  22.           <animateTransform attributeName="transform" type="translate" values="-8 0; 2 0; 2 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.25;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
  23.         </path>
  24.         <path transform="translate(2 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
  25.           <animateTransform attributeName="transform" type="translate" values="2 0; 12 0; 12 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.35;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
  26.         </path>
  27.         <path transform="translate(12 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
  28.           <animateTransform attributeName="transform" type="translate" values="12 0; 22 0; 22 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.45;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
  29.         </path>
  30.         <path transform="translate(24 0)" d="M4 12 A4 4 0 0 0 4 20 A4 4 0 0 0 4 12"> 
  31.           <animateTransform attributeName="transform" type="translate" values="22 0; 32 0; 32 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.55;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
  32.         </path>
  33.       </svg>`),
  34.     },
  35.     {
  36.       name: 'Bars',
  37.       style: {
  38.         fill: '#1890ff',
  39.       },
  40.       html: this.dom.bypassSecurityTrustHtml(`
  41.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  42.         <path transform="translate(2)" d="M0 12 V20 H4 V12z"> 
  43.           <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
  44.         </path>
  45.         <path transform="translate(8)" d="M0 12 V20 H4 V12z">
  46.           <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
  47.         </path>
  48.         <path transform="translate(14)" d="M0 12 V20 H4 V12z">
  49.           <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
  50.         </path>
  51.         <path transform="translate(20)" d="M0 12 V20 H4 V12z">
  52.           <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
  53.         </path>
  54.         <path transform="translate(26)" d="M0 12 V20 H4 V12z">
  55.           <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
  56.         </path>
  57.       </svg>`),
  58.     },
  59.     {
  60.       name: 'Bubbles',
  61.       style: {
  62.         height: '40px',
  63.         fill: '#1890ff',
  64.       },
  65.       html: this.dom.bypassSecurityTrustHtml(`
  66.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  67.         <circle transform="translate(8 0)" cx="0" cy="16" r="0"> 
  68.           <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0"
  69.             keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  70.         </circle>
  71.         <circle transform="translate(16 0)" cx="0" cy="16" r="0"> 
  72.           <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3"
  73.             keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  74.         </circle>
  75.         <circle transform="translate(24 0)" cx="0" cy="16" r="0"> 
  76.           <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6"
  77.             keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  78.         </circle>
  79.       </svg>`),
  80.     },
  81.     {
  82.       name: 'Cubes',
  83.       style: {
  84.         height: '40px',
  85.         fill: '#1890ff',
  86.       },
  87.       html: this.dom.bypassSecurityTrustHtml(`
  88.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  89.         <path transform="translate(-8 0)" d="M0 12 V20 H8 V12z"> 
  90.           <animateTransform attributeName="transform" type="translate" values="-8 0; 2 0; 2 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.25;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
  91.         </path>
  92.         <path transform="translate(2 0)" d="M0 12 V20 H8 V12z"> 
  93.           <animateTransform attributeName="transform" type="translate" values="2 0; 12 0; 12 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.35;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
  94.         </path>
  95.         <path transform="translate(12 0)" d="M0 12 V20 H8 V12z"> 
  96.           <animateTransform attributeName="transform" type="translate" values="12 0; 22 0; 22 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.45;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
  97.         </path>
  98.         <path transform="translate(24 0)" d="M0 12 V20 H8 V12z"> 
  99.           <animateTransform attributeName="transform" type="translate" values="22 0; 32 0; 32 0;" dur="0.8s" repeatCount="indefinite" begin="0" keytimes="0;.55;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline"  />
  100.         </path>
  101.       </svg>`),
  102.     },
  103.     {
  104.       name: 'Cylon',
  105.       style: {
  106.         height: '40px',
  107.         fill: '#1890ff',
  108.       },
  109.       html: this.dom.bypassSecurityTrustHtml(`
  110.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  111.         <path transform="translate(0 0)" d="M0 12 V20 H4 V12z">
  112.           <animateTransform attributeName="transform" type="translate" values="0 0; 28 0; 0 0; 0 0" dur="1.5s" begin="0" repeatCount="indefinite" keytimes="0;0.3;0.6;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  113.         </path>
  114.         <path opacity="0.5" transform="translate(0 0)" d="M0 12 V20 H4 V12z">
  115.           <animateTransform attributeName="transform" type="translate" values="0 0; 28 0; 0 0; 0 0" dur="1.5s" begin="0.1s" repeatCount="indefinite" keytimes="0;0.3;0.6;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  116.         </path>
  117.         <path opacity="0.25" transform="translate(0 0)" d="M0 12 V20 H4 V12z">
  118.           <animateTransform attributeName="transform" type="translate" values="0 0; 28 0; 0 0; 0 0" dur="1.5s" begin="0.2s" repeatCount="indefinite" keytimes="0;0.3;0.6;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  119.         </path>
  120.       </svg>`),
  121.     },
  122.     {
  123.       name: 'Spin',
  124.       style: {
  125.         fill: '#1890ff',
  126.       },
  127.       html: this.dom.bypassSecurityTrustHtml(`
  128.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  129.         <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
  130.         <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
  131.           <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
  132.         </path>
  133.       </svg>`),
  134.     },
  135.     {
  136.       name: 'Spinning Bubbles',
  137.       style: {
  138.         fill: '#1890ff',
  139.       },
  140.       html: this.dom.bypassSecurityTrustHtml(`
  141.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  142.         <circle cx="16" cy="3" r="0">
  143.           <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  144.         </circle>
  145.         <circle transform="rotate(45 16 16)" cx="16" cy="3" r="0">
  146.           <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.125s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  147.         </circle>
  148.         <circle transform="rotate(90 16 16)" cx="16" cy="3" r="0">
  149.           <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.25s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  150.         </circle>
  151.         <circle transform="rotate(135 16 16)" cx="16" cy="3" r="0">
  152.           <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.375s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  153.         </circle>
  154.         <circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
  155.           <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  156.         </circle>
  157.         <circle transform="rotate(225 16 16)" cx="16" cy="3" r="0">
  158.           <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.625s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  159.         </circle>
  160.         <circle transform="rotate(270 16 16)" cx="16" cy="3" r="0">
  161.           <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.75s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  162.         </circle>
  163.         <circle transform="rotate(315 16 16)" cx="16" cy="3" r="0">
  164.           <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.875s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  165.         </circle>
  166.         <circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
  167.           <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
  168.         </circle>
  169.       </svg>`),
  170.     },
  171.     {
  172.       name: 'Spokes',
  173.       style: {
  174.         fill: '#1890ff',
  175.       },
  176.       html: this.dom.bypassSecurityTrustHtml(`
  177.       <svg id="loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  178.         <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(0 16 16)">
  179.           <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0"/>
  180.         </path>
  181.         <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(45 16 16)">
  182.           <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.125s"/>
  183.         </path>
  184.         <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(90 16 16)">
  185.           <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.25s"/>
  186.         </path>
  187.         <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(135 16 16)">
  188.           <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.375s"/>
  189.         </path>
  190.         <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(180 16 16)">
  191.           <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.5s"/>
  192.         </path>
  193.         <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(225 16 16)">
  194.           <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.675s"/>
  195.         </path>
  196.         <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(270 16 16)">
  197.           <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.75s"/>
  198.         </path>
  199.         <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(315 16 16)">
  200.           <animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.875s"/>
  201.         </path>
  202.       </svg>`),
  203.     },
  204.   ];
  206.   constructor(private loadingSrv: LoadingService, private dom: DomSanitizer) { }
  208.   show(custom: any): void {
  209.     this.loadingSrv.open({
  210.       type: 'custom',
  211.       custom,
  212.       text: 'Loading...(Auto close after 3s)',
  213.     });
  215.     setTimeout(() => this.loadingSrv.close(), 1000 * 3);
  216.   }
  217. }

loading 加载指示符 - 图3

延迟

延迟显示 loading 效果。当调用 open() 后 delay 时间内调用 close()，则不显示 loading 状态。

  1. import { Component } from '@angular/core';
  2. import { LoadingService } from '@delon/abc/loading';
  4. @Component({
  5.   selector: 'components-loading-delay',
  6.   template: `
  7.     <button nz-button (click)="show()">Display after 1 seconds</button>
  8.     <button nz-button (click)="close()">Close</button>
  9.   `,
  10. })
  11. export class ComponentsLoadingDelayComponent {
  12.   constructor(private loadingSrv: LoadingService) {}
  14.   show(): void {
  15.     this.loadingSrv.open({ delay: 1000 });
  17.     setTimeout(() => this.loadingSrv.close(), 1000 * 5);
  18.   }
  20.   close() {
  21.     this.loadingSrv.close();
  22.   }
  23. }

API

LoadingService

名称说明
open(options?: LoadingShowOptions)打开
close()关闭

LoadingShowOptions

成员说明类型默认值全局配置
type显示类型LoadingTypespin✅
text描述文案string加载中…✅
icon类型为 icon 的配置项LoadingIcon-✅
custom类型为 custom 的配置项LoadingCustom-✅
delay延迟显示加载效果的时间（防止闪烁），单位：毫秒number-✅