ngx-http-loader
TypeScript icon, indicating that this package has built-in type declarations

16.0.0 • Public • Published

NGX HTTP LOADER

All Contributors npm npm npm License Support Support Support Support Support Support Support

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

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i ngx-http-loader

    Weekly Downloads

    147

    Version

    16.0.0

    License

    MIT

    Unpacked Size

    278 kB

    Total Files

    54

    Last publish

    Collaborators

    • bhushanzade