Custom Loader / Spinner For Angular

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.

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

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.

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

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