](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 13** Support
- Custom spinner image support(gif), you can pass `img` tag
- 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
- New updated DEMO website
- Option to disable fade animation
- Show/Hide spinner from template using @Input() variable
## Demo
[Working Demo](https://napster2210.github.io/ngx-spinner/)
### 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
```
Using angular-cli:
```bash
$ ng add ngx-spinner
```
## Usage
Import `NgxSpinnerModule` in in the root module(`AppModule`):
```typescript
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
// Import library module
import { NgxSpinnerModule } from "ngx-spinner";
@NgModule({
imports: [
// ...
NgxSpinnerModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
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...
",
});
```
### How to use type?
- Go to the [Load Awesome](http://github.danielcardoso.net/load-awesome/animations.html).
- Select any animation, copy name of animation, replace all spaces with hyphen(-) and all letters should be lowercase.
- Let's say if I select "Ball 8bits" animation then `type` will be `ball-8bits`.
- For more information you can check it out [Demo](https://napster2210.github.io/ngx-spinner/)
## Useful Tips
- Make sure you've added `CUSTOM_ELEMENTS_SCHEMA` as your schema in your main module.
- If you use multiple `show()` methods in a single component or single function one after another then wrap the `show()` method within `setTimeout()` method to avoid any rendering issue.
- When you want to use spinner inside any container(`fullScreen: false`), in that case your parent element of spinner must have `position: relative;` style property.
- You can't set custom template through service options, it's a limitation by Angular itself.
## Versioning
ngx-spinner will be maintained under the Semantic Versioning guidelines.
Releases will be numbered with the following format:
`