Package Exports

ngh-spinner

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngh-spinner) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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)