Angular 5+的动画加载微调器

Angular 5+的动画加载微调器
插件名称 ngx-spinner
发布时间 2020年6月12日
插件作者 Napster2210

一组用于Angular 4/5/6/7/8/9 +的50多个动画加载微调器,旨在告知用户操作正在进行中。

特征

  • Angular 9支持
  • 自定义微调框图像支持(gif),您可以传递img标签
  • 多个微调器
  • 通过服务可配置的选项
  • 全屏模式(启用/禁用)
  • show()/hide() 方法返回承诺
  • 动态 z-index
  • hide/show旋转器时平滑动画
  • 新更新的DEMO网站

安装:

# Yarn
$ yarn add ngx-spinner

# NPM
$ npm install ngx-spinner --save

安装:

导入NgxSpinnerModule根模块(AppModule):

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// 导入库模块
import { NgxSpinnerModule } from "ngx-spinner";

@NgModule({
  imports: [
    // ...
    NgxSpinnerModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

NgxSpinnerService在您想使用的任何地方添加服务ngx-spinner

import { NgxSpinnerService } from "ngx-spinner";

class AppComponent implements OnInit {
  constructor(private spinner: NgxSpinnerService) {}

  ngOnInit() {
    /** spinner在init上启动 */
    this.spinner.show();

    setTimeout(() => {
      /** 旋转器在5秒后结束 */
      this.spinner.hide();
    }, 5000);
  }
}

现在在您的模板中使用

<ngx-spinner></ngx-spinner>

方法

  • NgxSpinnerService.show() 显示微调器
  • NgxSpinnerService.hide() 隐藏微调器

可用选项

  • [bdColor]:RGBA颜色格式。要为背景设置背景颜色,默认为rgba(51,51,51,0.8)其中aplhavalue(0.8)为背景的不透明度
  • [大小]:任何人都从smalldefaultmediumlarge。要设置微调框的大小,默认large
  • [color]:任何CSS颜色格式。要设置微调框的颜色,默认#fff
  • [type]:从Load Awesome中选择任何动画微调器。要设置微调器的类型,默认ball-scale-multiple
  • [fullScreen]truefalse 要启用/禁用全屏模式(覆盖),默认true
  • [name]:对于多个微调器要设置微调器的名称,默认primary
  • [zIndex]:对于动态z-index设置微调器的z-index,默认99999
  • [template]:用于自定义微调器图像要为自定义微调器设置自定义模板,默认null