Angular 8+ loader spinner. It can be used with two simple methods, .show() and .hide(). An example can be found in the /projects/spinner-test.

Install library ( Angular 10+ ):

npm install @k-adam/ngx-loading-spinner --save 

If you are using an older version of Angular x (8/9), then install it this way:

npm install @k-adam/ngx-loading-spinner@1.x --save 

Import module to your applications main module:

import { NgxLoadingSpinnerModule } from '@k-adam/ngx-loading-spinner'; 

Import it in your NgModule:

imports: [ NgxLoadingSpinnerModule.forRoot() ] 

Place the component somewhere in your root level component:

<ngx-loading-spinner></ngx-loading-spinner> 

Import NgxLoadingSpinnerService to the components where you want to control the spinner:

import { NgxLoadingSpinnerService } from '@k-adam/ngx-loading-spinner'; 

Inject dependency:

constructor( private spinnerService: NgxLoadingSpinnerService ) { } 

Use show() and hide() method to control the loading spinner:

this.spinnerService.show(); // ... this.spinnerService.hide(); 

All the parameters are optional.

Example:

<ngx-loading-spinner [threshold]="250" [timeout]="20000" [loadingText]="'Loading...'" ></ngx-loading-spinner>