Custom Loading Indicators For Angular – ngx-loading-x

Description:

A fresh new, easy to use, and fully configurable loading indicator with app logo and blurred content component for Angular applications.

How to use it:

1. Install the package.

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

2. Import the ngx-loading-x module.

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. Add a loading indicator to your app.

<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. Blur your app background when the loading indicator is activated. OPTIONAL.

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

Preview: