{"id":27351532,"url":"https://github.com/ArshdeepGrover/groupix-spinner-library","last_synced_at":"2025-04-12T20:02:02.175Z","repository":{"id":285582030,"uuid":"958060914","full_name":"ArshdeepGrover/groupix-spinner-library","owner":"ArshdeepGrover","description":"A lightweight Angular spinner library to show loading indicators in your application.","archived":false,"fork":false,"pushed_at":"2025-04-01T15:03:03.000Z","size":180,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T15:37:47.021Z","etag":null,"topics":["angular","cli","library","npm","npm-package","package"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@groupix/groupix-spinner","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArshdeepGrover.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-03-31T15:22:47.000Z","updated_at":"2025-04-01T15:03:07.000Z","dependencies_parsed_at":"2025-04-01T15:48:36.222Z","dependency_job_id":null,"html_url":"https://github.com/ArshdeepGrover/groupix-spinner-library","commit_stats":null,"previous_names":["arshdeepgrover/groupix-spinner-library"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArshdeepGrover%2Fgroupix-spinner-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArshdeepGrover%2Fgroupix-spinner-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArshdeepGrover%2Fgroupix-spinner-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArshdeepGrover%2Fgroupix-spinner-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArshdeepGrover","download_url":"https://codeload.github.com/ArshdeepGrover/groupix-spinner-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625495,"owners_count":21135513,"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","cli","library","npm","npm-package","package"],"created_at":"2025-04-12T20:02:00.746Z","updated_at":"2025-04-12T20:02:02.159Z","avatar_url":"https://github.com/ArshdeepGrover.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Apr 13, 2025](/content/2025/04/13/README.md)","Loaders"],"readme":"# 🚀 Groupix Spinner\n\n![NPM Downloads](https://img.shields.io/npm/dm/%40groupix%2Fgroupix-spinner?color=blue\u0026label=Downloads)  \n![NPM Type Definitions](https://img.shields.io/npm/types/%40groupix%2Fgroupix-spinner?color=green\u0026label=Type%20Definitions)  \n![NPM License](https://img.shields.io/npm/l/%40groupix%2Fgroupix-spinner?color=orange\u0026label=License)  \n![Bundle Size](https://img.shields.io/bundlephobia/min/%40groupix%2Fgroupix-spinner?color=red\u0026label=Bundle%20Size)  \n\n### ⚡ A lightweight Angular spinner library for seamless loading animations!\n\n---\n\n## 🎯 Features\n✔️ Easy to integrate  \n✔️ Lightweight and fast performance  \n\n---\n\n## 📦 Installation\n\nInstall the package using NPM:\n\n```sh\nnpm install @groupix/groupix-spinner --save\n```\n\n---\n\n## 🚀 Usage\n\n### 1️⃣ Import the module in `app.module.ts`  \n\n```typescript\nimport { GroupixSpinnerModule } from '@groupix/groupix-spinner';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [GroupixSpinnerModule],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n### 2️⃣ Add the spinner component to your template  \n\n```html\n\u003cgroupix-spinner\u003e\u003c/groupix-spinner\u003e\n```\n\n\u003c!-- \n---\n## 🎨 Customization\n\nModify the styles using CSS:\n\n```css\ngroupix-spinner {\n  display: block;\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n  border: 5px solid rgba(0, 0, 0, 0.1);\n  border-top-color: #3498db;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n``` --\u003e\n\n---\n\n## 🎮 Live Demo\n\n🚀 Check out the live demo: [Groupix Spinner Demo](https://groupix-spinner.vercel.app/)  \n\n---\n\n## ❓ FAQ\n\n### 🔹 How do I show/hide the spinner dynamically?\nUse Angular binding:\n\n```html\n\u003cgroupix-spinner *ngIf=\"isLoading\"\u003e\u003c/groupix-spinner\u003e\n\u003cbutton (click)=\"isLoading = !isLoading\"\u003eToggle Spinner\u003c/button\u003e\n```\n\n---\n\n## 🤝 Contributing\n\nWe ❤️ contributions! If you have any suggestions or want to improve this library, feel free to open an issue or submit a PR.\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License**.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FArshdeepGrover%2Fgroupix-spinner-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FArshdeepGrover%2Fgroupix-spinner-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FArshdeepGrover%2Fgroupix-spinner-library/lists"}