ngh-spinner

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

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)
color	Any Hex Color value can be used, Default value is #2598db
type	Spinner Type ,Bellow table updates all spinner type. Default value is circle-clip

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

Type of Spinner Available

Spinner Type
circle-clip
square-spin
bar-load
bar-center
spinner
signal

License

The MIT License (MIT)