Angular - Loading image

Package for Loading image - angular Projects,This Library provides HTTP Interceptor, Its listen all the HTTP requests and show the Loading Info. You Can manullay load or hide the loading image also.

Installation

$ npm install ngg-loading --save

Usage

This will Interceptor,So for triggering the Loading image please use HttpClientModule

Import LoadingModule,HttpClientModule in app.module.ts:

// Import library module
import { LoadingModule } from 'ngg-loading';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    // ...
    HttpClientModule,
    LoadingModule
  ]
})

Add the service in the component you are going to use

import { LoadingService } from 'ngg-loading';

export class AppComponent implements OnInit {
  constructor(private loader: LoadingService) { }

  bgColor ='rgba(0,0,0,0.5)'; // overlay background color
  loading_img ='your image name'; // gif or svg image
  ngOnInit(){
    this.loader.show();
    setTimeout(() => {
      this.loader.hide();
    }, 5000);
  }

}

In Template Use the directive

<ngg-loading [bgColor]='bgColor' [loading_img] ='loading_img'  ></ngg-loading>

Customization

Propery | Uses | --- | --- | bgColor | Used to change the background color of overlay div, It uses rgba value, Default value is rgba(0,0,0,0.5) | loading_img | Any Gif or svg image (size your convinient) |

You can also manually show hide the loader using show() and hide() methodes in LoadingService

License

The MIT License (MIT)