![](\"https://cdn.rawgit.com/Napster2210/ngx-spinner/gh-pages/assets/logo.png\"){kind=logo}
\n \n \n
![\"Chrome\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\")
](http://godban.github.io/browsers-support-badges/)Chrome | [![\"Firefox\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\")
](http://godban.github.io/browsers-support-badges/)Firefox | [![\"IE](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\")
](http://godban.github.io/browsers-support-badges/)IE / Edge | [![\"iOS](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\")
](http://godban.github.io/browsers-support-badges/)Safari | [![\"Opera\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\")
](http://godban.github.io/browsers-support-badges/)Opera |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Latest ✔ | Latest ✔ | IE11, Edge ✔ | Latest ✔ | Latest ✔ |\n\n## Features\n\n- **Angular 21** Support\n- Custom spinner image support(gif), you can pass `img` tag\n- Multiple Spinners\n- Configurable option through service\n- Fullscreen Mode(Enable/Disable)\n- `show()/hide()` methods return promise\n- Dynamic `z-index`\n- Smooth animation while `hide/show` the spinner\n- New updated DEMO website\n- Option to disable fade animation\n- Show/Hide spinner from template using @Input() variable\n- Smaller bundle size\n\n## Demo\n\n[Working Demo](https://napster2210.github.io/ngx-spinner/)\n\n### StackBlitz Demo\n\n- [Normal Usage](https://stackblitz.com/edit/angular-kruvnm)\n\n- [Inside Container](https://stackblitz.com/edit/angular-7arfhb)\n\n- [Multiple Spinner](https://stackblitz.com/edit/angular-utwjxi)\n\n- [Change Options Through Service](https://stackblitz.com/edit/angular-exgxk2)\n\n## Installation\n\n`ngx-spinner` is available via [npm](https://www.npmjs.com/package/ngx-spinner) and [yarn](https://yarnpkg.com/en/package/ngx-spinner)\n\nUsing npm:\n\n```bash\n$ npm install ngx-spinner --save\n```\n\nUsing yarn:\n\n```bash\n$ yarn add ngx-spinner\n```\n\nUsing angular-cli:\n\n```bash\n$ ng add ngx-spinner\n```\n\n## Usage\n\nAdd css animation files to angular.json config\n\n```jsonc\n{\n \"styles\": [\n \"node_modules/ngx-spinner/animations/ball-scale-multiple.css\", // ===> Add css file based on your animation name(here it's \"ball-scale-multiple\")\n // You're able to add multiple files if you need\n ],\n}\n```\n\nImport `NgxSpinnerModule` in in the root module(`AppModule`):\n\n```typescript\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from \"@angular/core\";\n// Import library module\nimport { NgxSpinnerModule } from \"ngx-spinner\";\n\n@NgModule({\n imports: [\n // ...\n NgxSpinnerModule,\n ],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n```\n\n#### NOTE\n\n- There is possibility to use global configuration for NgxSpinnerModule.\n- Just call `forRoot` method for NgxSpinnerModule and pass configuration object.\n- The input properties of NgxSpinnerComponent has higher priority than global options\n\n```typescript\n// Available options\ninterface NgxSpinnerConfig {\n type?: string;\n}\n// Use in app\n@NgModule({\n imports: [\n NgxSpinnerModule.forRoot({ type: 'ball-scale-multiple' })\n ]\n})\n```\n\nAdd `NgxSpinnerService` service wherever you want to use the `ngx-spinner`.\n\n```typescript\nimport { NgxSpinnerService } from \"ngx-spinner\";\n\nclass AppComponent implements OnInit {\n constructor(private spinner: NgxSpinnerService) {}\n\n ngOnInit() {\n /** spinner starts on init */\n this.spinner.show();\n\n setTimeout(() => {\n /** spinner ends after 5 seconds */\n this.spinner.hide();\n }, 5000);\n }\n}\n```\n\nNow use in your template\n\n```html\nLoading...
\n
\",\n});\n```\n\n### How to use type?\n\n- Go to the [Load Awesome](http://github.danielcardoso.net/load-awesome/animations.html).\n- Select any animation, copy name of animation, replace all spaces with hyphen(-) and all letters should be lowercase.\n - Let's say if I select \"Ball 8bits\" animation then `type` will be `ball-8bits`.\n - For more information you can check it out [Demo](https://napster2210.github.io/ngx-spinner/)\n - For smaller bundle size you need to add css for `ball-8bits` animation(e.g. `ball-8bits.css`)\n\n## Useful Tips\n\n- Make sure you've added `CUSTOM_ELEMENTS_SCHEMA` as your schema in your main module.\n- 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.\n- 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.\n- You can't set custom template through service options, it's a limitation by Angular itself.\n\n## Versioning\n\nngx-spinner will be maintained under the Semantic Versioning guidelines.\nReleases will be numbered with the following format:\n\n`
\r \r
\r \r
\r \r
\r \r
\r \r