JavaScriptAngularJSCustom Loader / Spinner For Angular

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.

Subscribe to our Newsletter

Get the Latest Article notification and Weekly Newsletters in your Inbox.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About SAROJ MEHER

He is a Lecturer (English & Sociology), a professional Artist, and a blogger. He do paintings, sketches since his childhood. He is in the teaching field for 10 years. In this teaching line, he has experience in teaching English at High School and College levels. He has also experienced teaching computer theory and practicals during the school teaching period. He is in the Blogging field for more than 5 years.

Subscribe to our Newsletter

Get the Latest Article notification and Weekly Newsletters in your Inbox.

TRENDING ARTICLES

ARTICLESLATEST