{"id":16666947,"url":"https://github.com/joshk2/ng-spinners","last_synced_at":"2025-07-01T10:04:43.708Z","repository":{"id":35049190,"uuid":"200636427","full_name":"JoshK2/ng-spinners","owner":"JoshK2","description":"Amazing collection of Angular spinners components with pure css.","archived":false,"fork":false,"pushed_at":"2023-03-01T05:54:50.000Z","size":1346,"stargazers_count":29,"open_issues_count":12,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-29T20:47:53.449Z","etag":null,"topics":["angular","angular-components","animation","components","loader","ng-spinners","spinner","spinners"],"latest_commit_sha":null,"homepage":"https://bit.dev/joshk/ng-spinners","language":"TypeScript","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/JoshK2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-05T10:45:17.000Z","updated_at":"2023-11-18T00:05:21.000Z","dependencies_parsed_at":"2024-12-11T20:01:03.803Z","dependency_job_id":null,"html_url":"https://github.com/JoshK2/ng-spinners","commit_stats":{"total_commits":64,"total_committers":3,"mean_commits":"21.333333333333332","dds":0.40625,"last_synced_commit":"5068983bc8d4cbf44996d5773cbd809e46262f53"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/JoshK2/ng-spinners","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Fng-spinners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Fng-spinners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Fng-spinners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Fng-spinners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoshK2","download_url":"https://codeload.github.com/JoshK2/ng-spinners/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Fng-spinners/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262941543,"owners_count":23388148,"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","angular-components","animation","components","loader","ng-spinners","spinner","spinners"],"created_at":"2024-10-12T11:12:32.906Z","updated_at":"2025-07-01T10:04:43.675Z","avatar_url":"https://github.com/JoshK2.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Spinners CSS Loaders ([Vue](https://github.com/JoshK2/vue-spinners-css), [React](https://github.com/JoshK2/react-spinners-css))\n[![bit components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991\u0026label=bit%20components\u0026query=payload.totalComponents\u0026url=https%3A%2F%2Fapi.bit.dev%2Fscope%2Fjoshk%2Fng-spinners)](https://bit.dev/joshk/ng-spinners)\n[![npm version](https://badge.fury.io/js/ng-spinners.svg)](http://badge.fury.io/js/ng-spinners)\n[![GitHub stars](https://img.shields.io/github/stars/joshk2/ng-spinners)](https://github.com/JoshK2/ng-spinners/stargazers)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/JoshK2/ng-spinners/master/LICENSE)\n[![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](https://twitter.com/JoshKuttler)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bit.dev/joshk/ng-spinners\"\u003e\u003cimg src=\"https://i.imagesup.co/images2/1990710a88808ee8914167c74f57e604c5ed91fe.gif\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAmazing collection of Angular spinners components with pure css.  \nThe Angular spinners are based on loading.io and from all over the web.\n\n- 💅No extra CSS imports\n- ✂️Zero dependencies\n- 📦Spinners can be installing separately\n\n## [Live Demo](https://bit.dev/joshk/ng-spinners)\nBrowse components and explore their props with [Bit](https://bit.dev/joshk/ng-spinners).  \nInstall specific angular spinner component with npm, yarn or bit without having to install the whole project.  \n[Install components and live demo](https://bit.dev/joshk/ng-spinners)\n\n\n## 🚀 List of Spinners - Input and Default Property\nEach component accepts a `color` prop, and few accepts also `size` prop.  \nThe default `color` prop is `#7f58af`.  \nComponent that accepts `size` prop have a default size in pixel.\n\n| Spinner                                | color: string | size: number  |\n| -------------------------------------- | ------------  | ------------- |\n| `\u003ccircle-loader\u003e\u003c/circle-loader\u003e`      | `#7f58af`     | `64`          |\n| `\u003cdefault-loader\u003e\u003c/default-loader\u003e`    | `#7f58af`     | -             |\n| `\u003cdualring-loader\u003e\u003c/dualring-loader\u003e`  | `#7f58af`     | -             |\n| `\u003cellipsis-loader\u003e\u003c/ellipsis-loader\u003e`  | `#7f58af`     | -             |\n| `\u003cfacebook-loader\u003e\u003c/facebook-loader\u003e`  | `#7f58af`     | -             |\n| `\u003cgrid-loader\u003e\u003c/grid-loader\u003e`          | `#7f58af`     | -             |\n| `\u003cheart-loader\u003e\u003c/heart-loader\u003e`        | `#7f58af`     | -             |\n| `\u003chourglass-loader\u003e\u003c/hourglass-loader\u003e`| `#7f58af`     | -             |\n| `\u003cring-loader\u003e\u003c/ring-loader\u003e`          | `#7f58af`     | `80`          |\n| `\u003cripple-loader\u003e\u003c/ripple-loader\u003e`      | `#7f58af`     | -             |\n| `\u003croller-loader\u003e\u003c/roller-loader\u003e`      | `#7f58af`     | -             |\n| `\u003cspinner-loader\u003e\u003c/spinner-loader\u003e`    | `#7f58af`     | -             |\n| `\u003corbitals-loader\u003e\u003c/orbitals-loader\u003e`  | `#7f58af`     | -             |\n\n\n## 📦 Installation\n### Using [npm](https://www.npmjs.com/package/ng-spinners) to install ng-spinners\n```\nnpm i --save ng-spinners\n```\n### Play and install spinners for Angular with [Bit](https://bit.dev/joshk/ng-spinners)\nInstall specific Angular spinner component/module with bit, npm or yarn without having to install the whole project\nUsing [bit](https://bit.dev/joshk/ng-spinners) to play with live demo, and try the spinners before install.\n\nset npm regisetry config(one time action):\n```bash\nnpm config set '@bit:registry' https://node.bit.dev\n```\nand use your favorite package manager:\n```bash\nnpm i @bit/joshk.ng-spinners.facebook-loader\nyarn add @bit/joshk.ng-spinners.facebook-loader\nbit import joshk.ng-spinners/facebook-loader \n```  \n\n## 💻 Usage Examples\nmodule file example:\n```javascript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n//using npm or yarn\nimport { FacebookLoaderModule } from 'ng-spinners';\n//using bit\nimport { FacebookLoaderModule } from '@bit/joshk.ng-spinners.facebook-loader';\n\n@NgModule({\n\tdeclarations: [\n\t\tAppComponent,\n\t],\n\timports: [\n\t\tBrowserModule,\n\t\tFacebookLoaderModule\n\t],\n\tproviders: [],\n\tbootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\ncomponent html file example:\n```html\n\u003cfacebook-loader color=\"black\"\u003e\u003c/facebook-loader\u003e\n\u003cfacebook-loader color=\"#de3541\"\u003e\u003c/facebook-loader\u003e\n\u003cfacebook-loader\u003e\u003c/facebook-loader\u003e\n```\nComplete example of this component can be found [here](https://bit.dev/joshk/ng-spinners/facebook-loader).   \n\n## 👾 Development\nYou can see the components locally by cloning this repo and doing the following steps:\n- Install dependencies from `package.json`, run: `npm install`.\n- Run the app in the development mode, run: `npm run start`.  \n\n## 🙌 Contributing\n\n- Pull requests and ⭐ stars are always welcome.\n- For bugs and feature requests, please create an issue.\n\n## 👏🏻 Support my open-source\nIf you like to support my open-source contributions please star and share this project. 💫\n\n## 📄 License\n[MIT](https://github.com/JoshK2/ng-spinners/blob/master/LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshk2%2Fng-spinners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshk2%2Fng-spinners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshk2%2Fng-spinners/lists"}