{"id":13410202,"url":"https://github.com/Napster2210/ngx-spinner","last_synced_at":"2025-03-14T15:32:01.907Z","repository":{"id":26868511,"uuid":"111367918","full_name":"Napster2210/ngx-spinner","owner":"Napster2210","description":"A library for loading spinner for Angular 4 - 17.","archived":false,"fork":false,"pushed_at":"2024-06-17T23:12:10.000Z","size":5375,"stargazers_count":823,"open_issues_count":18,"forks_count":138,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-10-29T15:13:00.925Z","etag":null,"topics":["angular","angular15","angular16","angular17","custom-spinner","loading-indicator","loading-screen","loading-spinner","multiple-spinners","ng16","ng17","ngx","ngx-spinner","spinner"],"latest_commit_sha":null,"homepage":"https://napster2210.github.io/ngx-spinner/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Napster2210.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-20T05:55:47.000Z","updated_at":"2024-10-09T18:51:28.000Z","dependencies_parsed_at":"2024-03-08T15:28:33.125Z","dependency_job_id":"2a29d6c6-fcc4-4792-a932-c5e93fa0b533","html_url":"https://github.com/Napster2210/ngx-spinner","commit_stats":{"total_commits":284,"total_committers":10,"mean_commits":28.4,"dds":0.5880281690140845,"last_synced_commit":"a83ae388d9b9994b337f26cc55a10f1934e9e159"},"previous_names":[],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Napster2210%2Fngx-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Napster2210%2Fngx-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Napster2210%2Fngx-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Napster2210%2Fngx-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Napster2210","download_url":"https://codeload.github.com/Napster2210/ngx-spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243600695,"owners_count":20317317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular15","angular16","angular17","custom-spinner","loading-indicator","loading-screen","loading-spinner","multiple-spinners","ng16","ng17","ngx","ngx-spinner","spinner"],"created_at":"2024-07-30T20:01:05.503Z","updated_at":"2025-03-14T15:32:01.901Z","avatar_url":"https://github.com/Napster2210.png","language":"CSS","funding_links":[],"categories":["Uncategorized","CSS"],"sub_categories":["Uncategorized"],"readme":"A library with more than 50 different loading spinners for Angular 4 - 19. (https://napster2210.github.io/ngx-spinner/)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg height=\"200px\" width=\"200px\" style=\"text-align: center;\" src=\"https://cdn.rawgit.com/Napster2210/ngx-spinner/gh-pages/assets/logo.png\"\u003e\n  \u003ch1 align=\"center\"\u003eNgxSpinner\u003c/h1\u003e\n\u003c/p\u003e\n\n[![Support](https://img.shields.io/badge/Support-Angular%204%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%205%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%206%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%207%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%208%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%209%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2010%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2011%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2012%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2013%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2014%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2015%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2016%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2017%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2018%2B-blue.svg?style=flat-square)]()\n[![Support](https://img.shields.io/badge/Support-Angular%2019%2B-blue.svg?style=flat-square)]()\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)]()\n[![Gitter](https://badges.gitter.im/ngx-spinner/community.svg)](https://gitter.im/ngx-spinner/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\n## What's New\n\n- Angular 19 support 🥳🥳🥳🥳\n\nUse appropriate version based on your Angular version.\n\n| Angular 19  | Angular 18  | Angular 17  | Angular 16  | Angular 15  |\n| ----------- | ----------- | ----------- | ----------- | ----------- |\n| \u003e=`v19.0.0` | \u003e=`v18.0.0` | \u003e=`v17.0.0` | \u003e=`v16.0.2` | \u003e=`v15.0.1` |\n\n| Angular 14  | Angular 13  | Angular 12  | Angular 11  | Angular 10  |\n| ----------- | ----------- | ----------- | ----------- | ----------- |\n| \u003e=`v14.0.0` | \u003e=`v13.1.1` | \u003e=`v12.0.0` | \u003e=`v11.0.2` | \u003e=`v10.0.1` |\n\n| Angular 9  | Angular 8 | Angular 6/7 | Angular 5  | Angular 4  |\n| ---------- | --------- | ----------- | ---------- | ---------- |\n| \u003e=`v9.0.1` | `v8.1.0`  | `v7.2.0`    | \u003e=`v1.2.0` | \u003e=`v2.0.0` |\n\n## Table of contents\n\n- [What's New](#whats-new)\n- [Table of contents](#table-of-contents)\n- [Browser Support](#browser-support)\n- [Features](#features)\n- [Demo](#demo)\n  - [StackBlitz Demo](#stackblitz-demo)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Methods](#methods)\n- [Available Options](#available-options)\n  - [Using Spinner Type](#using-spinner-type)\n  - [Using Custom Spinner](#using-custom-spinner)\n  - [NOTE](#note)\n  - [How to use type?](#how-to-use-type)\n- [Useful Tips](#useful-tips)\n- [Versioning](#versioning)\n- [Creator](#creator)\n  - [Yuvraj Chauhan](#yuvraj-chauhan)\n- [Future Plan](#future-plan)\n- [Ask Me](#ask-me)\n- [Credits](#credits)\n  - [License](#license)\n\n## Browser Support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Latest ✔                                                                                                                                                                                                      | Latest ✔                                                                                                                                                                                                          | IE11, Edge ✔                                                                                                                                                                                                    | Latest ✔                                                                                                                                                                                                                  | Latest ✔                                                                                                                                                                                                  |\n\n## Features\n\n- **Angular 18** 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\" // ===\u003e 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\";\nimport { BrowserAnimationsModule } from \"@angular/platform-browser/animations\";\n// Import library module\nimport { NgxSpinnerModule } from \"ngx-spinner\";\n\n@NgModule({\n  imports: [\n    // ...\n    BrowserAnimationsModule,\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(() =\u003e {\n      /** spinner ends after 5 seconds */\n      this.spinner.hide();\n    }, 5000);\n  }\n}\n```\n\nNow use in your template\n\n```html\n\u003cngx-spinner type=\"ball-scale-multiple\"\u003e\u003c/ngx-spinner\u003e\n```\n\nSee [Demo](#demo)\n\n## Methods\n\n- `NgxSpinnerService.show()` Shows the spinner\n- `NgxSpinnerService.hide()` Hides the spinner\n\n## Available Options\n\n- **[bdColor]**: RGBA color format.\n  To set background-color for backdrop, default `rgba(51,51,51,0.8)` where `alpha` value(0.8) is opacity of backdrop\n- **[size]**: Anyone from `small`, `default`, `medium`, `large`.\n  To set size of spinner, default `large`\n- **[color]**: Any css color format.\n  To set color of spinner, default `#fff`\n- **[type]**: Choose any animation spinner from [Load Awesome](http://github.danielcardoso.net/load-awesome/animations.html).\n  To set type of spinner\n- **[fullScreen]**: `true` or `false`\n  To enable/disable fullscreen mode(overlay), default `true`\n- **[name]**: For multiple spinners\n  To set name for spinner, default `primary`\n- **[zIndex]**: For dynamic z-index\n  To set z-index for the spinner, default `99999`\n- **[template]**: For custom spinner image\n  To set custom template for the custom spinner, default `null`\n- **[showSpinner]**: `true` or `false`\n  To show/hide spinner from template using variable\n- **[disableAnimation]**: `true` or `false`\n  To enable/disable fade animation of spinner, default `false`\n\n#### Using Spinner Type\n\n```html\n\u003cngx-spinner\n  bdColor=\"rgba(51,51,51,0.8)\"\n  size=\"medium\"\n  color=\"#fff\"\n  type=\"ball-scale-multiple\"\n\u003e\n  \u003cp style=\"font-size: 20px; color: white\"\u003eLoading...\u003c/p\u003e\n\u003c/ngx-spinner\u003e\n```\n\n#### Using Custom Spinner\n\n```html\n\u003cngx-spinner\n  bdColor=\"rgba(0, 0, 0, 1)\"\n  template=\"\u003cimg src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' /\u003e\"\n\u003e\n\u003c/ngx-spinner\u003e\n```\n\n---\n\n#### NOTE\n\n- You can pass `HTML` code as loading text now, instead of input parameter(`loadingText`). Check above code for reference.\n- If you want multiple `ngx-spinner` instance, just add `name` attribute with `ngx-spinner` component. But in this case, you've to pass that particular name of a spinner in `show/hide` method. Check [Demo](#demo)\n- You can also change the options/configuration of spinner through service now.\n- For smaller bundle size, add specific css file under \"styles\" array in `angular.json` file\n\n```javascript\nthis.spinner.show(\"mySpinner\", {\n  type: \"line-scale-party\",\n  size: \"large\",\n  bdColor: \"rgba(0, 0, 0, 1)\",\n  color: \"white\",\n  template:\n    \"\u003cimg src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' /\u003e\",\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`\u003cmajor\u003e.\u003cminor\u003e.\u003cpatch\u003e`\n\nFor more information on SemVer, please visit http://semver.org.\n\n## Creator\n\n#### [Yuvraj Chauhan](mailto:yuvrajchauhan3113@gmail.com)\n\n- [@GitHub](https://github.com/Napster2210)\n\n## Future Plan\n\n- Interceptor Implementation\n\n## Ask Me\n\n- Now you can directly send me a message on [Gitter](https://gitter.im/ngx-spinner/community) for any query/suggestion/updates\n\n## Credits\n\nInspired by [Load Awesome by Daniel Cardoso.](https://github.com/danielcardoso/load-awesome)\n\nThanks [Alex Vieira Alencar](https://github.com/iamavieira) for helping me with Multiple Spinner Support.\n\nThanks [ennjin](https://github.com/ennjin) for reducing the bundle size.\n\n### License\n\nngx-spinner is [MIT licensed](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNapster2210%2Fngx-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNapster2210%2Fngx-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNapster2210%2Fngx-spinner/lists"}