To install this library, run:

$ npm install ng-http-loader --save

This package provides an HTTP Interceptor, and a spinner component (All from SpinKit at the moment). The HTTP interceptor listens to all HTTP requests and shows a spinner during pending requests.

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; [...] import { AppComponent } from './app.component'; import { NgHttpLoaderModule } from 'ng-http-loader/ng-http-loader.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgHttpLoaderModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

In your app.component.html, add :

<spinner></spinner>

You can too customize the background-color and the spinner type :

<spinner [backgroundColor]="'#ff0000'" [spinner]="Spinkit.skWave"></spinner>

The different spinners avalaible are referenced in this class.

Then, in order to have this module listening to your http requests, replace all the @angular/http usages by http: HttpInterceptorService.

Compatible with Angular 4+.

The spinners/loaders have been taken from SpinKit.