{"id":26923817,"url":"https://github.com/arshdeepgrover/groupix-spinner-library","last_synced_at":"2026-04-11T06:05:11.654Z","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":246741185,"owners_count":20826063,"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-02T01:42:47.248Z","updated_at":"2025-12-30T23:12:29.931Z","avatar_url":"https://github.com/ArshdeepGrover.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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\n✔️ Easy to integrate  \n✔️ Lightweight and fast performance  \n✔️ Customizable ball count (3-9 balls)  \n✔️ Multiple size options (sm, m, l, xl, xxl)  \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\u003c!-- Basic usage --\u003e\n\u003cgroupix-spinner\u003e\u003c/groupix-spinner\u003e\n\n\u003c!-- With custom properties --\u003e\n\u003cgroupix-spinner \n  [ballCount]=\"5\"\n  size=\"xl\"\u003e\n\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## ⚙️ Configuration Options\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `ballCount` | `number` | `3` | Number of bouncing balls (3-9) |\n| `size` | `'sm' \\| 'm' \\| 'l' \\| 'xl' \\| 'xxl'` | `'l'` | Size of the balls |\n\n---\n\n## 📏 Size Options\n\nChoose the perfect size for your spinner! Each size is optimized for different use cases:\n\n### 🔸 Available Sizes\n\n| Size | Dimensions | Best For | Example |\n|------|------------|----------|---------|\n| `sm` | 20×20px | Small buttons, inline loading | `\u003cgroupix-spinner size=\"sm\"\u003e\u003c/groupix-spinner\u003e` |\n| `m` | 30×30px | Form inputs, compact spaces | `\u003cgroupix-spinner size=\"m\"\u003e\u003c/groupix-spinner\u003e` |\n| `l` | 40×40px | **Default** - General purpose | `\u003cgroupix-spinner size=\"l\"\u003e\u003c/groupix-spinner\u003e` |\n| `xl` | 50×50px | Page loading, prominent areas | `\u003cgroupix-spinner size=\"xl\"\u003e\u003c/groupix-spinner\u003e` |\n| `xxl` | 60×60px | Full-screen loading, hero sections | `\u003cgroupix-spinner size=\"xxl\"\u003e\u003c/groupix-spinner\u003e` |\n\n### 🎨 Size Examples\n\n```html\n\u003c!-- Tiny spinner for buttons --\u003e\n\u003cbutton [disabled]=\"loading\"\u003e\n  \u003cgroupix-spinner *ngIf=\"loading\" size=\"sm\" [ballCount]=\"3\"\u003e\u003c/groupix-spinner\u003e\n  {{ loading ? 'Loading...' : 'Submit' }}\n\u003c/button\u003e\n\n\u003c!-- Medium spinner for cards --\u003e\n\u003cdiv class=\"card-loading\"\u003e\n  \u003cgroupix-spinner size=\"m\" [ballCount]=\"5\"\u003e\u003c/groupix-spinner\u003e\n\u003c/div\u003e\n\n\u003c!-- Large spinner for page loading --\u003e\n\u003cdiv class=\"page-loader\"\u003e\n  \u003cgroupix-spinner size=\"xl\" [ballCount]=\"7\"\u003e\u003c/groupix-spinner\u003e\n  \u003cp\u003eLoading your content...\u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- Extra large for splash screens --\u003e\n\u003cdiv class=\"splash-screen\"\u003e\n  \u003cgroupix-spinner size=\"xxl\" [ballCount]=\"9\"\u003e\u003c/groupix-spinner\u003e\n\u003c/div\u003e\n```\n\n### 💡 Size Tips\n\n- **Responsive Design**: Use CSS media queries to change sizes on different screens\n- **Performance**: Smaller sizes with fewer balls load faster\n- **Accessibility**: Larger sizes are easier to see for users with visual impairments\n- **Context**: Match the spinner size to the content it's loading\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?\n\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### 🔹 How do I customize the spinner appearance?\n\nYou can customize ball count and size:\n\n```html\n\u003c!-- Small spinner with 3 balls --\u003e\n\u003cgroupix-spinner \n  [ballCount]=\"3\"\n  size=\"sm\"\u003e\n\u003c/groupix-spinner\u003e\n\n\u003c!-- Large spinner with 7 balls --\u003e\n\u003cgroupix-spinner \n  [ballCount]=\"7\"\n  size=\"xxl\"\u003e\n\u003c/groupix-spinner\u003e\n```\n\n### 🔹 What's the valid range for ball count?\n\nThe ball count must be between 3 and 9. Values outside this range will be automatically clamped.\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## 👨‍💻 Created by\n\n# **Arshdeep Singh**\n\n📧 \u003carsh199820@gmail.com\u003e  \n💼 [LinkedIn](https://linkedin.com/in/arshdeepgrover)  \n🌐 [Personal Website](https://arshdeepsingh.info)\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License**.\n","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"}