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.

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

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

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.