](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Latest ✔ | Latest ✔ | IE11, Edge ✔ | Latest ✔ | Latest ✔ |
## Features
- **Angular 8** Support
- Multiple Spinners
- Configurable option through service
- Fullscreen Mode(Enable/Disable)
- `show()/hide()` methods return promise
- Dynamic `z-index`
- Smooth animation while `hide/show` the spinner
## Demo
[Working Demo](https://napster2210.github.io/ngx-spinner/)(Not Updated one)
### StackBlitz Demo:
- [Normal Usage](https://stackblitz.com/edit/angular-kruvnm)
- [Inside Container](https://stackblitz.com/edit/angular-7arfhb)
- [Multiple Spinner](https://stackblitz.com/edit/angular-utwjxi)
- [Change Options Through Service](https://stackblitz.com/edit/angular-exgxk2)
## Installation
`ngx-spinner` is available via [npm](https://www.npmjs.com/package/ngx-spinner) and [yarn](https://yarnpkg.com/en/package/ngx-spinner)
Using npm:
```bash
$ npm install ngx-spinner --save
```
Using yarn:
```bash
$ yarn add ngx-spinner
```
## Usage
Import `NgxSpinnerModule` in in the root module(`AppModule`):
```typescript
// Import library module
import { NgxSpinnerModule } from "ngx-spinner";
@NgModule({
imports: [
// ...
NgxSpinnerModule
]
})
export class AppModule {}
```
Add `NgxSpinnerService` service wherever you want to use the `ngx-spinner`.
```typescript
import { NgxSpinnerService } from "ngx-spinner";
class AppComponent implements OnInit {
constructor(private spinner: NgxSpinnerService) {}
ngOnInit() {
/** spinner starts on init */
this.spinner.show();
setTimeout(() => {
/** spinner ends after 5 seconds */
this.spinner.hide();
}, 5000);
}
}
```
Now use in your template
```html
Loading...