angular自定义的加载指示器– ngx-loading-x

angular自定义的加载指示器– ngx-loading-x
插件名称 ngx-loading-x
发布时间 2020年6月16日
插件作者 silvareal

一个全新的,易于使用的,完全可配置的加载指示器,带有应用程序徽标和Angular应用程序的模糊内容组件。

如何使用它:

1.安装软件包。

# NPM
$ npm install ngx-loading-x --save

2.导入ngx-loading-x模块。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CoreModule } from './core/core.module';
import { NgxLoadingXModule } from 'ngx-loading-x';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxLoadingXModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3.在您的应用中添加一个加载指示器。

<ngx-loading-x 
  [show]="true"
  [bgLogoUrl]="/path/to/logo.svg"
  [bgOpacity]="5"
  [bgLogoUrlPosition]="bottom-right"
  [bgLogoUrlSize]="100"
  [spinnerSize]="120"
  [spinnerColor]="dd1b16"
  [spinnerPosition]="center-center">
</ngx-loading-x>

4.激活加载指示器后,模糊您的应用背景。可选的。

<div NgxLoadingXBlur [show]="load">
</div>