🚀 Groupix Spinner

!NPM Downloads
!NPM Type Definitions
!NPM License
!Bundle Size

$3

---

🎯 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:

``sh
npm install @groupix/groupix-spinner --save
`

---

🚀 Usage

$3

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

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

$3

`html




[ballCount]="5"
size="xl">

`

---

⚙️ 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:

$3

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

$3

`html



{{ loading ? 'Loading...' : 'Submit' }}












`

$3

- 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

$3

Use Angular binding:

`html

Toggle Spinner
`

$3

You can customize ball count and size:

`html

[ballCount]="3"
size="sm">



[ballCount]="7"
size="xxl">

``

$3

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

📧
💼 LinkedIn
🌐 Personal Website

---

📄 License

This project is licensed under the MIT License.