Angular HTTP Global Spinner Loader using ng http loader

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';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    
    HttpClientModule,
    NgHttpLoaderModule.forRoot(),
  ],
  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:

<ng-http-loader></ng-http-loader>

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';

@Component({
  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
    .get<any>('https://jsonplaceholder.typicode.com/posts')
    .subscribe((response) => {
      console.log(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>

</div>

<ng-http-loader></ng-http-loader>

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.

<ng-http-loader
[backdrop]="false"
[backgroundColor]="'#ff0000'"
[debounceDelay]="100"
[extraDuration]="300"
[minDuration]="300"
[opacity]=".6"
[spinner]="spinkit.skWave">
</ng-http-loader>

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

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