@akshay-bhalala/loaders/README.md

A high-quality, customizable collection of React loader components for your UI: skeletons, spinners, bars, dots, rings, waves, and more. Perfect for modern web apps!

# React Loaders Library <br> <img src="https://img.shields.io/npm/v/@akshay-bhalala/loaders?color=blue" alt="npm version" /> <img src="https://img.shields.io/bundlephobia/minzip/@akshay-bhalala/loaders" alt="bundle size" />

A high-quality, customizable collection of React loader components for your UI: skeletons, spinners, bars, dots, rings, waves, and more. Perfect for modern web apps!

---


## ✨ Features

- ⚡ 10+ unique loader components (spinners, skeletons, bars, dots, rings, and more)
- 🎨 Fully customizable via props
- 🪶 Lightweight & tree-shakable
- 🛡️  100% TypeScript & type-safe
- 🧩 Easy integration with any React project
- 📦 Ready for production

---


## 📦 Installation

```bash
npm install @akshay-bhalala/loaders
```

---


## 🚀 Quick Usage

```tsx
import React from 'react';
import {
  SkeletonLoader,
  SpinnerLoader,
  DotsLoader,
  BarLoader,
  PulseLoader,
  RingLoader,
  WaveLoader,
  DualRingLoader,
  BounceLoader,
  CircularProgressLoader,
} from '@akshay-bhalala/loaders';

const Example = () => (
  <div style={{ display: 'grid', gap: 24 }}>
    <SkeletonLoader width={200} height={24} borderRadius={8} />
    <SpinnerLoader size={48} color="#1976d2" thickness={5} />
    <DotsLoader size={16} color="#1976d2" dotSpacing={10} />
    <BarLoader width={300} height={8} color="#1976d2" backgroundColor="#e0e0e0" borderRadius={4} />
    <PulseLoader size={24} color="#1976d2" />
    <RingLoader size={40} color="#1976d2" thickness={4} />
    <WaveLoader barCount={5} barWidth={4} barHeight={20} color="#1976d2" gap={4} />
    <DualRingLoader size={40} color="#1976d2" thickness={4} />
    <BounceLoader ballCount={3} size={14} color="#1976d2" gap={8} />
    <CircularProgressLoader size={40} color="#1976d2" thickness={4} />
  </div>
);
```

---


## 🧩 Components & Props

### 🟦 SkeletonLoader
- `width`, `height`, `borderRadius`, `style`, `className`

### 🌀 SpinnerLoader
- `size`, `color`, `thickness`, `style`, `className`

### 🔵 DotsLoader
- `size`, `color`, `dotSpacing`, `style`, `className`

### ▓ BarLoader
- `width`, `height`, `color`, `backgroundColor`, `borderRadius`, `style`, `className`

### 🟣 PulseLoader
- `size`, `color`, `style`, `className`

### 🏵️ RingLoader
- `size`, `color`, `thickness`, `style`, `className`

### 🌊 WaveLoader
- `barCount`, `barWidth`, `barHeight`, `color`, `gap`, `style`, `className`

### 🏵️ DualRingLoader
- `size`, `color`, `thickness`, `style`, `className`

### 🟠 BounceLoader
- `ballCount`, `size`, `color`, `gap`, `style`, `className`

### 🟢 CircularProgressLoader
- `size`, `color`, `thickness`, `style`, `className`

---


## 📚 Example: Customizing a Loader

```tsx
<SpinnerLoader size={60} color="#ff5722" thickness={6} style={{ margin: 16 }} />
```

---


## 🛠️ Contributing

Pull requests and issues are welcome! Please open an issue to discuss your idea or bug before submitting a PR.

---


## 📄 License

MIT

---


## 👤 Author

**Akshay Bhalala**

- [NPM Profile](https://www.npmjs.com/~akshay-bhalala)
- [GitHub](https://github.com/Akshay-Bhalala)

---


> Happy loading! 🎉 

---


## 🏷️ Keywords

react, loader, loaders, spinner, skeleton, progress, bar, dots, ring, wave, pulse, bounce, circular, component, ui, typescript, indicator, loading, animation

---