ng4-loading-spinner

Angular 4/5/6 custom async loading spinner with two simple methods for your asychronous calls.
Custom loading template & loading text inputs are also available.

![David]()
![license]()


> Docs Link

> Link to ng4-loading-spinner

Default Spinner Example

Open Plunker

Custom Template Example

Open Plunker

Installation

npm i ng4-loading-spinner --save

Description

> You can override the css for your customized spinner.

> You can also configure your own threshold to show spinner only for more expensive processes!

> Supports latest Angular v5.x

> Supports latest Angular v6.x

> Supports latest Angular cli v1.5.x

> Supports latest Angular cli v6.x

New Updates

> #loading-spinner-text / .loading-spinner-text : Both id and class attributes given to spinner text component to customize the loading text css

> [timeout] The time after which spinner will be hidden. Default is 5000 ms

> Resolved issues related to templates and loading text.

Usage

> Import module to your application master module

``javascript
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
`

> Make an import entry as shown below

`javascript

imports: [ Ng4LoadingSpinnerModule.forRoot() ]

`

> Include spinner component to your root level component.

`html



`

> Import Ng4LoadingSpinnerService to the component where you want to show the spinner.

`javascript

import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

`

> Inject dependancy

`javascript

constructor(
private spinnerService: Ng4LoadingSpinnerService
) { }

`

> Use show() method to display the loading spinner.

`javascript

this.spinnerService.show();

`

> Use hide() method to hide the loading spinner once the processing is done.

`javascript

this.spinnerService.hide();

`

Example

`javascript

this.spinnerService.show();
this.http.get(GLOBAL['CONFIG_URL'])
.subscribe(data => {
this.spinnerService.hide();
});

`

Custom template

> [template] : Accepts HTML which generates the loading spinner. You can apply additional css to design your own spinner, or can just pass *.gif image to show the loading spinner.

> [loadingText] : Accepts a string to display the text while the loading process.

> [zIndex] : Accepts a z-index css property for loading text.

> [threshold] : Accepts time in milliseconds for threshold through which you can conditionally show the spinner only for expensive calls. Default is 500 ms.

> [timeout] : Accepts time in milliseconds to hide the spinner automatically. Default is 5000 ms.

> default [loadingText] text would be blank.

> app.component.html : both are optional if not provided default would be shown.

`html



`

> [threshold]="2000" : This will show the loading bar for the only processes which will take time more 2 secs.

> app.component.ts

`javascript

template: string =

``

License

MIT © Amit Mahida