https://github.com/arshdeepgrover/groupix-spinner-library
A lightweight Angular spinner library to show loading indicators in your application.
https://github.com/arshdeepgrover/groupix-spinner-library
angular cli library npm npm-package package
Last synced: 2 months ago
JSON representation
A lightweight Angular spinner library to show loading indicators in your application.
- Host: GitHub
- URL: https://github.com/arshdeepgrover/groupix-spinner-library
- Owner: ArshdeepGrover
- Created: 2025-03-31T15:22:47.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-01T15:03:03.000Z (about 1 year ago)
- Last Synced: 2025-04-01T15:37:47.021Z (about 1 year ago)
- Topics: angular, cli, library, npm, npm-package, package
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@groupix/groupix-spinner
- Size: 176 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 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:
```sh
npm install @groupix/groupix-spinner --save
```
---
## 🚀 Usage
### 1️⃣ Import the module in `app.module.ts`
```typescript
import { GroupixSpinnerModule } from '@groupix/groupix-spinner';
@NgModule({
declarations: [AppComponent],
imports: [GroupixSpinnerModule],
bootstrap: [AppComponent]
})
export class AppModule {}
```
### 2️⃣ Add the spinner component to your template
```html
```
---
## ⚙️ 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 | `` |
| `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 | `` |
### 🎨 Size Examples
```html
{{ loading ? 'Loading...' : 'Submit' }}
Loading your content...
```
### 💡 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](https://groupix-spinner.vercel.app/)
---
## ❓ FAQ
### 🔹 How do I show/hide the spinner dynamically?
Use Angular binding:
```html
Toggle Spinner
```
### 🔹 How do I customize the spinner appearance?
You can customize ball count and size:
```html
```
### 🔹 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**
📧
💼 [LinkedIn](https://linkedin.com/in/arshdeepgrover)
🌐 [Personal Website](https://arshdeepsingh.info)
---
## 📄 License
This project is licensed under the **MIT License**.