Angular 7/8 | HTTP Global Spinner Loader using ng-http-loader Tutorial by Example

In this tutorial, we will implement a global Spinner Loader in the Angular project by using a third-party package. The Spinner loader is shown whenever there is a pending HTTP call using Interceptors. This spinner loader comes with many configuration settings to customize its look and feel in your project.

Angular interceptors were introduced after version 4.3, which are used to handle HTTP calls behavior to the next level. This Loader Spinner also creates an interceptor to show or hide spinner loader automatically, but we can also control it to show/ hide manually for specific situations.

Let’s get started!

Here we are going to create a new Angular project using the Ng CLI tool with the latest version 8.3.17.

Create a new Angular project

Run the following command to create a new project or you can skip this step to continue with your existing project.

Install and Configure ng-http-loader

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

 

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:

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 project root which can be app.component.html:

Test the Spinner Loader

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

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

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

You can get your free key here

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

This loader will show a spinner and a backdrop shadow on the full screen, we can customize its properties.

Customize the Spinner Loader

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

[backdrop]: Takes boolean to show/ hide backdrop shadow; default is true.
[backgroundColor]: Color of the spinner.
[debounceDelay]: After how much 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.

Spinner Style

Spinner style can be changed by importing Spinkit class in component as shown below:

In the template, we can change style using [spinner] property:

Different style are skChasingDots, skCubeGrid, skDoubleBounce, skRotatingPlane, skSpinnerPulse, skThreeBounce, skWanderingCubes and skWave

Custom Template for Loader

You can also use your custom template for spinner loader by following below steps:

  • Create your component

  • Add it to the entryComponents array in your module’s configuration

  • Reference your component as a public property in your app.component.ts

  • Reference the predefined property in the ng-http-loader component selector like this:

That’s it using this package you can easily add a Spinner loader quicky in your project. This is useful when you don’t want a user to click anywhere till the current HTTP call is in progress as there is a backdrop that prevents any accidental clicks.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of