In this article, I’m going to share an awesome load indicator for the Angular app. in the demo you will see every time a user enters their username and password and click the register button, it shows a great loading animation, you can use this kind of spinner on your app when submitting forms and loading the data forms server to the client.

Getting Started

Installation

Install ngx-loading-x from NPM using this command

npm install ngx-loading-x --save

Usage

Import NgxLoadingXModule into the root of your 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,
    // Import NgxLoadingXModule
    NgxLoadingXModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

create a boolean variable that is accessible from the component which will contain ngx-loading-x. This boolean is used as an input into ngx-loading to determine when the loading spinner is visible.

import { Component, OnInit } from '@angular/core';

@Component({
    //...
})
export class AppComponent implements OnInit {
    //...
    public loading = false;

    constructor() { }

    ngOnInit() { }

    registerTest() {
        // loading triggered
        this.load = true;

        setTimeout(() => {
            // loader stops after 5s
            this.load = false,
            // ..
            this.register = true;
        }, 5000)
    }
}

Include ngx-loading-x component selector to your app component templates, Set the [show] input variable of ngx-loading-x to point to your boolean i.e load, which will determine the ngx-loading-x visibility.

<ngx-loading-x [show]="load"></ngx-loading-x>

ngx-loading-x component selector attributes

ngx-loading-x component selector Attributes

NgxLoadingXBlur Directive

If you want your page content is blurred/frosted while showing the loading background overlay.

<div NgxLoadingXBlur [show]="load">
  <!-- This page content will be blurred/frosted when loading background overlay is showed -->
</div>
<ngx-loading-x [show]="load"></ngx-loading-x>

Attribute

Custom configuration for NgxLoadingXModule

You can override the default configuration via forRoot() method.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxLoadingXConfig, POSITION, SPINNER, NgxLoadingXModule } from 'ngx-loading-x';


const ngxLoadingXConfig: NgxLoadingXConfig = {
  show: false,
  bgBlur: 2,
  bgOpacity: 5,
  bgLogoUrl: '',
  bgLogoUrlPosition: POSITION.topLeft,
  bgLogoUrlSize: 100,
  spinnerType: SPINNER.wanderingCubes,
  spinnerSize: 120,
  spinnerColor: '#dd0031',
  spinnerPosition: POSITION.centerCenter,
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgxLoadingXModule.forRoot(ngxLoadingXConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

See live demo and download the source code.

This awesome script developed by silvareal. Visit their official repository for more information and follow for future updates.