🚀 Groupix Spinner

⚡ 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×20px	Small buttons, inline loading	<groupix-spinner size="sm"></groupix-spinner>
m	30×30px	Form inputs, compact spaces	<groupix-spinner size="m"></groupix-spinner>
l	40×40px	Default - General purpose	<groupix-spinner size="l"></groupix-spinner>
xl	50×50px	Page loading, prominent areas	<groupix-spinner size="xl"></groupix-spinner>
xxl	60×60px	Full-screen loading, hero sections	<groupix-spinner size="xxl"></groupix-spinner>

🎨 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

📧 [email protected]
💼 LinkedIn
🌐 Personal Website

---

📄 License

This project is licensed under the MIT License.