Custom Loader / Spinner For Angular

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.

Custom Loader / Spinner For Angular

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

AttributesTypeRequiredDefaultDescription
showbooleanoptionalfalseDetermines the visibility of the loader
bgLogoUrlstringoptional(empty string)Logo Url
bgOpacitynumberoptional5background opacity
bgLogoUrlPositionnumberoptionalbottom-rightLogo position. available positions can be accessed via POSITION
bgLogoUrlSizenumberoptional100Logo size
spinnerTypestringoptionalwandering-cubesSpinner animation type. available types can be accessed via SPINNER
spinnerSizenumberoptional120Spinner size
spinnerColorstringoptional#dd1b16Spinner color
spinnerPositionstringoptionalcenter-centerSpinner 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

AttributesTypeRequiredDefaultDescription
bgBlurbooleanoptional5blurred/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 { }

AttributesTypeRequiredDefaultDescription
showbooleanoptionalfalseDetermines the visibility of the loader
bgLogoUrlstringoptional(empty string)Logo Url
bgOpacitynumberoptional5background opacity
bgBlurbooleanoptional5blurred/frosted background
bgLogoUrlPositionnumberoptionalbottom-rightLogo position. available positions can be accessed via POSITION
bgLogoUrlSizenumberoptional100Logo size
spinnerTypestringoptionalwandering-cubesSpinner animation type. available types can be accessed via SPINNER
spinnerSizenumberoptional120Spinner size
spinnerColorstringoptional#dd1b16Spinner color
spinnerPositionstringoptionalcenter-centerSpinner position. available positions can be accessed via POSITION

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.

Leave a Reply