ngh-spinner v0.0.4

Angular - Loading Spinner

Package for Loading Spinner - 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 spinners also.

Installation

$ npm install ngh-spinner --save

Usage

This will Interceptor,So for triggering the Spinner please use HttpClientModule

Import NghSpinnerModule,HttpClientModule in app.module.ts:

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

Add the service in the component you are going to use

import { NghSpinnerService } from 'ngh-spinner';

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

  title = 'ngh-spinner-app'; 
  bgColor ='rgba(0,0,0,0.5)'; // overlay background color
  color ='#2598db'; // color of spinner
  type ='square-spin'; // type of spinner
  ngOnInit(){
    this.loader.show();
    setTimeout(() => {
      this.loader.hide();
    }, 5000);
  }

}

In Template Use the directive

<ngh-spinner [bgColor]='bgColor'  [color]='color' [type]='type' ></ngh-spinner>

Customization

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

Type of Spinner Available

License

The MIT License (MIT)