Angular HTTP Global Spinner Loader using ng http loader

Posted By : Ajeet Kumar | 27-Dec-2022

Create a new Angular project

Project Setup

Let’s set up a brand-new project and create the necessary components by running the following commands:

  • ng new global-loader - to create a project named global-loader

Install and Configure ng-http-loader

Run the following command to install ng-http-loader in the project:

$ npm i ng-http-loader

Update App Module

After successfully installing the package, we need to open app.module.ts file to import it and add in the imports array as shown below:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { NgHttpLoaderModule } from 'ng-http-loader';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Here we also added HttpClientModule to make HTTP calls in the project.

Add Spinner Loader

Now you simply need to add the following template in the project root which can be app.component.html:


Test the Spinner Loader

To test this loader, we added an HTTP call method to load the Moves list from the server:

Add the following code in the app.component.ts file:

// app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'angular-http-spinner-loader';

  constructor(private http: HttpClient) {}

  getData() {
    return this.http
    .subscribe((response) => {
    }, (error) => {
      alert('Error Found!');

we are making a get HTTP call to test our spinner.

In app.component.html there is a button and loader component:

<div class="container text-center" style="margin-top:100px;">

  <button type="button" class="btn btn-warning" (click)="getData()">Get Data</button>



Customize the Spinner Loader

The following properties of the NgHttpLoader the component can be customized to change the spinner style and behavior:

[backdrop]: Takes boolean to show/ hide backdrop shadow; default is true.
[backgroundColor]: Color of the spinner.
[debounceDelay]: After how many milliseconds the spinner will show
[extraDuration]: Time in milliseconds to show spinner after completing HTTP call.
[minDuration]: Minimum duration for which spinner will show at least.
[opacity]: Opacity of the spinner.
[spinner]: Different styles of the spinner can be added.



import { Component } from '@angular/core'; 
import { Spinkit } from 'ng-http-loader'; // <============

    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
export class AppComponent {
    public spinkit = Spinkit; // <============

About Author

Author Image
Ajeet Kumar

Ajeet is working as a Frontend Developer with years of expertise in the industry. He possesses a strong knowledge and understanding of the latest technologies, and has hands-on experience in Angular, HTML5, CSS3, JavaScript, Bootstrap, PrimeNG (Angular UI Component Library), Nebular (Customizable Angular UI Library), Auth and Security, tailwind CSS, StrAPI, Git, GitHub, Git-Lab, and more. He excels in API integration in Angular, web development, development testing, and deployments. He consistently contributes to the company's value through his deliverables in various client projects, including Pando Mall, Musical School, Crypstarter, Metaverse, Hatrik Marketplace, and many others.

Request for Proposal

Name is required

Comment is required

Sending message..