ngx-loading-spinner

ngx-loading-spinner is following simplistic approach to showcase your asychronous events in latest Angular Framework.

Also provides custom templating & loading text inputs.

![license]()

> Docs Link

> Link to ngx-loading-spinner

Default Spinner Example

Open Plunker

Custom Template Example

Open Plunker

Installation

npm i ngx-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 All Major Angular Versions

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 { NgxLoadingSpinnerModule } from 'ngx-loading-spinner';

@NgModule({
declarations: [
...
],
imports: [
NgxLoadingSpinnerModule.forRoot()
],
exports: [
NgxLoadingSpinnerComponent
]
})

`

> Include spinner component to your root level component.

`html

`

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

`javascript

import { NgxLoadingSpinnerService } from 'ngx-loading-spinner';

`

> Inject dependancy

`javascript

constructor(
private spinnerService: NgxLoadingSpinnerService
) { }

`

> 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