In this post I am going to share awesome loading indicator for angular app. in the demo you’ll see when ever user enter their username & password and click register button it display an awesome loading animation , you can use this type of spinner on your application while submitting forms and loading data form server to 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

Attributes	Type	Required	Default	Description
show	boolean	optional	false	Determines the visibility of the loader
bgLogoUrl	string	optional	(empty string)	Logo Url
bgOpacity	number	optional	5	background opacity
bgLogoUrlPosition	number	optional	bottom-right	Logo position. available positions can be accessed via POSITION
bgLogoUrlSize	number	optional	100	Logo size
spinnerType	string	optional	wandering-cubes	Spinner animation type. available types can be accessed via SPINNER
spinnerSize	number	optional	120	Spinner size
spinnerColor	string	optional	#dd1b16	Spinner color
spinnerPosition	string	optional	center-center	Spinner position. available positions can be accessed via POSITION

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

Attributes	Type	Required	Default	Description
bgBlur	boolean	optional	5	blurred/frosted background

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 { }

Attributes	Type	Required	Default	Description
show	boolean	optional	false	Determines the visibility of the loader
bgLogoUrl	string	optional	(empty string)	Logo Url
bgOpacity	number	optional	5	background opacity
bgBlur	boolean	optional	5	blurred/frosted background
bgLogoUrlPosition	number	optional	bottom-right	Logo position. available positions can be accessed via POSITION
bgLogoUrlSize	number	optional	100	Logo size
spinnerType	string	optional	wandering-cubes	Spinner animation type. available types can be accessed via SPINNER
spinnerSize	number	optional	120	Spinner size
spinnerColor	string	optional	#dd1b16	Spinner color
spinnerPosition	string	optional	center-center	Spinner position. available positions can be accessed via POSITION

See live demo and download source code.
DEMO DOWNLOAD

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

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