⚡ A lightweight Angular spinner library for seamless loading animations

---

🎯 Features

✔️ Easy to integrate
✔️ Lightweight and fast performance
✔️ Customizable ball count (3-9 balls)
✔️ Multiple size options (sm, m, l, xl, xxl)

---

📦 Installation

Install the package using NPM:

npm install @groupix/groupix-spinner --save

---

🚀 Usage

1️⃣ Import the module in app.module.ts

import { GroupixSpinnerModule } from '@groupix/groupix-spinner';

@NgModule({
  declarations: [AppComponent],
  imports: [GroupixSpinnerModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

2️⃣ Add the spinner component to your template

<!-- Basic usage -->
<groupix-spinner></groupix-spinner>

<!-- With custom properties -->
<groupix-spinner 
  [ballCount]="5"
  size="xl">
</groupix-spinner>

---

⚙️ Configuration Options

Property	Type	Default	Description
ballCount	number	3	Number of bouncing balls (3-9)
size	'sm' | 'm' | 'l' | 'xl' | 'xxl'	'l'	Size of the balls

---

📏 Size Options

Choose the perfect size for your spinner! Each size is optimized for different use cases:

🔸 Available Sizes

Size	Dimensions	Best For	Example
`sm$	20 \times 20\text{px}	\text{Small} \text{buttons}, \text{inline} \text{loading}	$`
`m$	30 \times 30\text{px}	\text{Form} \text{inputs}, \text{compact} \text{spaces}	$`
`l$	40 \times 40\text{px}	\text{Default} - \text{General} \text{purpose}	$`
`xl$	50 \times 50\text{px}	\text{Page} \text{loading}, \text{prominent} \text{areas}	$`
`xxl$	60 \times 60\text{px}	\text{Full}-\text{screen} \text{loading}, \text{hero} \text{sections}	$`

🎨 Size Examples

<!-- Tiny spinner for buttons -->
<button [disabled]="loading">
  <groupix-spinner *ngIf="loading" size="sm" [ballCount]="3"></groupix-spinner>
  {{ loading ? 'Loading...' : 'Submit' }}
</button>

<!-- Medium spinner for cards -->
<div class="card-loading">
  <groupix-spinner size="m" [ballCount]="5"></groupix-spinner>
</div>

<!-- Large spinner for page loading -->
<div class="page-loader">
  <groupix-spinner size="xl" [ballCount]="7"></groupix-spinner>
  <p>Loading your content...</p>
</div>

<!-- Extra large for splash screens -->
<div class="splash-screen">
  <groupix-spinner size="xxl" [ballCount]="9"></groupix-spinner>
</div>

💡 Size Tips

• Responsive Design: Use CSS media queries to change sizes on different screens
• Performance: Smaller sizes with fewer balls load faster
• Accessibility: Larger sizes are easier to see for users with visual impairments
• Context: Match the spinner size to the content it's loading

---

🎮 Live Demo

🚀 Check out the live demo: Groupix Spinner Demo

---

❓ FAQ

🔹 How do I show/hide the spinner dynamically?

Use Angular binding:

<groupix-spinner *ngIf="isLoading"></groupix-spinner>
<button (click)="isLoading = !isLoading">Toggle Spinner</button>

🔹 How do I customize the spinner appearance?

You can customize ball count and size:

<!-- Small spinner with 3 balls -->
<groupix-spinner 
  [ballCount]="3"
  size="sm">
</groupix-spinner>

<!-- Large spinner with 7 balls -->
<groupix-spinner 
  [ballCount]="7"
  size="xxl">
</groupix-spinner>

🔹 What's the valid range for ball count?

The ball count must be between 3 and 9. Values outside this range will be automatically clamped.

---

🤝 Contributing

We ❤️ contributions! If you have any suggestions or want to improve this library, feel free to open an issue or submit a PR.

---

👨‍💻 Created by

Arshdeep Singh

📧 arsh199820@gmail.com
💼 LinkedIn
🌐 Personal Website

---

📄 License

This project is licensed under the MIT License.