@k-adam/ngx-loading-spinner
TypeScript icon, indicating that this package has built-in type declarations

1.10.2 • Public • Published

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>

Readme

Keywords

Package Sidebar

Install

npm i @k-adam/ngx-loading-spinner

Weekly Downloads

25

Version

1.10.2

License

MIT

Unpacked Size

89.9 kB

Total Files

19

Last publish

Collaborators

  • k-adam