What is use?

ngx-http-loader HTTP loader for Angular 6 and 6+ with different types of loaders, custom loader, custom complete template with title and subtitle, managing colors, font size, text colors etc. Complete package with custamization support. Interceptor will helps to shows loader when http/xhr request calls. The loader visible until the http/xhr request is in pending to complete status. If want to show and hide loader forcefully or any other operation Using NgxHttpLoaderService call show() and hide() methods.

Supports

| Angular Version | Package Version | | :-------------- | :-------------- | | Angular 7 | Version 7 | | Angular 8 | Version 8 | | Angular 9 | Version 9 | | Angular 10 | Version 10 | | Angular 11 | Version 11 | | Angular 12 | Version 12 | | Angular 13 | Version 13 | | Angular 14 | Version 14 | | Angular 15 | Version 15 | | Angular 16 | Version 16 |

Installation

npm install --save ngx-http-loader

Demo live site

Features

• HTTP interceptor
• Multiple types of loaders
• Custom loader support
• Custom template support
• Customize backdrop background color, text color, icon color etc
• Title or Subtitle/Description support
• Time Delay Support
• Show and Hide Services Available
• Filters request complete url, regex pattern urls, http methods or hearders for hide loader

Usage

From your Angular AppModule:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
// [...]
import { AppComponent } from "./app.component";
import { HttpClientModule } from "@angular/common/http"; // <============
import { NgxHttpLoaderModule } from "ngx-http-loader"; // <============

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule, // <============ (Perform HTTP requests with this module)
    NgxHttpLoaderModule.forRoot(), // <============ Don't forget to call 'forRoot()'!
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

In your app.component.html, simply add:

<ngx-http-loader [opacity]="0.9" [title]="'procodeprograming.com'" [subTitle]="'Search user profiles for finding and matching skillsets for your need. It helps you to find user skills and his profession and educational details.'" [loader]="loader.ELLIPSIS" [iconColor]="'white'" [backdropBackgroundColor]="'black'"> </ngx-http-loader>

To specify the loader type this way, you must reference the NgxLoader const as a public property in your app.component.ts:

import { Component } from "@angular/core";
import { NgxLoader } from "ngx-http-loader"; // <============

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

Available Options

• [loader]: To set different type of loader. Default is RIPPLE. Enum type is NgxLoader.
• [opacity]: To change opacity of backdrop background. Default is 0.8 number format
• [backdropBackgroundColor]: Set backdrop background color. Default is 'linear-gradient(0deg, black, transparent)'
• [iconColor]: To set loader or svg icon color. Default is '#fff'
• [title]: To set title below the loader or spinner. Default empty.
• [titleColor]: To set title color. Default '#fff'
• [titleSize]: For changing title text size. Default '3rem'.
• [subTitle]: To set sub title or description below the loader or spinner. Default empty.
• [subTitleColor]: To set sub title color. Default '#fff'
• [subTitleSize]: For changing sub title text size. Default '1.5rem'.
• [filterUrls]: Pass Array<string> complete urls with query params to hide loader on calling this http request. Default empty array.
• [filterUrlRegexPatterns]: Pass Array<RegExp> urls string with regex pattern to hide loader on this urls calling. Default empty array.
• [filterHttpHeaders]: Pass Array<string> headers. Default empty array.
• [filterHttpMethods]: Pass Array<string> http methods. Default empty array.
• [custom]: true or false To enable/disable add custom loader or image, default false
• [customLoader]: If custom is true this custom loader shows.
• [customTemplate]: Complete custom template. Default is default loader.

Defining your own custom template

• use [customTemplate] in tag.
• Add your template in <ng-template #loaderTemplate></ng-template>
• Pass loaderTemplate to [customTemplate]

<ngx-http-loader [customTemplate]="loaderTemplate">
  <ng-template #loaderTemplate>
    // Add style in your style.css file or your component css file or else use inline css.
    <div id="preloader">
      <table id="wrapper">
        <tr>
          <td>
            <img src="assets/image/logo_red.gif" alt="" />
          </td>
        </tr>
      </table>
    </div>
  </ng-template>
</ngx-http-loader>

Replace your custom loader.

• use [custom] [customLoader] in tag.
• [custom]="true" is need to show the custom loader.
• Add your template in <ng-template #loader></ng-template>
• Pass loader to [customLoader]

<ngx-http-loader [custom]="true" [customLoader]="loaderTemplate">
  <ng-template #loaderTemplate>
    // Add style in your style.css file or your component css file or else use inline css.
    <style>
      img {
        width: 800px;
        height: 800px;
      }
    </style>
    <img src="assets/image/logo_red.gif" alt="" />
  </ng-template>
</ngx-http-loader>

Filters HTTP / XHR requests from interceptor

Filter with complete url with queryparams

<ngx-http-loader [filterUrls]="filterUrls"></ngx-http-loader>

public filterUrls = [
    'http://localhost:8080/api/movie',
    'http://localhost:8080/api/list?search="Find list of movies"&extra=true'
];

Filter with regex url

<ngx-http-loader [filterUrlRegexPatterns]="filterUrlRegexPatterns"></ngx-http-loader>

public filterUrlRegexPatterns:RegExp[] = [new RegExp('api/movie'), new RegExp('[a-zA-Z]')];

Filter with http headers:

<ngx-http-loader [filterHttpHeaders]="['hEaDeR', 'AnoTheR-HeAdEr']"></ngx-http-loader>

Filter with http methods:

<ngx-http-loader [filterHttpMethods]="['POST', 'DELETE']"></ngx-http-loader>

Manually show and hide the loader

You can manually show and hide the loader if needed. You must use the service NgxHttpLoaderService for this purpose.

import { Component } from "@angular/core";
import { NgxHttpLoaderService } from "ngx-http-loader";

@Component({
  selector: "my-component",
  templateUrl: "./my.component.html",
  styleUrls: ["./my.component.css"],
})
export class MyComponent {
  constructor(private ngxhttploader: NgxHttpLoaderService) {
    // show the spinner
    this.ngxhttploader.show();

    // hide the spinner
    setTimeout(() => {
      this.ngxhttploader.hide();
    }, 5000);
  }
}

List available type of Loaders

const NgxLoader = {
  DEFAULT: "loader-default",
  CLOCK: "loader-clock",
  DUALRING: "loader-dual-ring",
  ELLIPSIS: "loader-ellipsis",
  FACEBOOK: "loader-facebook",
  GEAR: "loader-gear",
  GRID: "loader-grid",
  HEART: "loader-heart",
  HOURGLASS: "loader-hourglass",
  JELLYBOX: "loader-jellybox",
  MULTICIRCLE: "loader-multicicle",
  RING: "loader-ring",
  RIPPLE: "loader-ripple",
  ROLLER: "loader-roller",
  SPINNER: "loader-spinner",
  THREEBOUNCE: "loader-three-bounce",
  WATERWAVE: "loader-water-wave",
  ROTATINGPLANE: "loader-rotating-plane",
};

Dependencies

• Angular 6 and 6+ Support
• Bootstrap 4 and 4+

Creator

Bhushan Zade

• @GitHub
• @LinkedIn