ngx-loading-spinner
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
.
Setup
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>
Use
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();
Parameters
All the parameters are optional.
Name | Type | Default | Description |
---|---|---|---|
timeout | number | 10000 ms | The spinner will be hidden automatically after the given time |
threshold | number | 500 ms | The spinner will be visible only, if the time between calling show() and hide() is more than threshold |
zIndex | number | 100 | The z-index property of the spinner overlay element |
loadingText | string | The displayed text under the spinner | |
template | string | The spinner can be replaced with HTML text |
Example:
<ngx-loading-spinner
[threshold]="250"
[timeout]="20000"
[loadingText]="'Loading...'"
></ngx-loading-spinner>