react-loaderkit/readme.md

A collection of customizable loading components for React

# React LoaderKit 🚀

A lightweight, customizable React loader component library featuring spinners, progress bars, skeletons, text loaders, creative animations, and icon loaders — designed to make your loading states look awesome with minimal effort.

---


## Features

- Multiple loader categories: spinner, progress, skeleton, text, creative, icon  
- Easy props to control size, color, and animation speed  
- Built with TypeScript, fully typed  
- Tree-shakable and minimal dependencies  


---


![React LoaderKit Demo](https://res.cloudinary.com/bmc21/image/upload/v1747657010/demo_dffruh.gif)

## Documentation

Full documentation, examples, and demos are available on the website:  
[www.react-loaderkit.in](https://www.react-loaderkit.in)

## Installation

```bash
npm install react-loaderkit
# or
yarn add react-loaderkit
Usage Example
tsx
Copy
Edit
import React from 'react';
import { IconSpin, CircleLoader, PulseLoader } from 'react-loaderkit';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: 20, alignItems: 'center', padding: 20 }}>
      <IconSpin size={50} color="#3b82f6" speed={2} />
      <CircleLoader size={40} color="#ef4444" />
      <PulseLoader size={60} speed={0.8} />
    </div>
  );
}
```

## 📦 Props (All Loaders)

| Prop   | Type   | Default | Description                                      |
|--------|--------|---------|--------------------------------------------------|
| `size` | number | `40`    | Width and height of the loader                  |
| `color`| string | Varies  | Color of the loader (CSS-compatible string)     |
| `speed`| number | `1`     | Animation speed multiplier (higher = faster)    |

---


## 🔄 Available Loaders

### 🌀 Spinner
- `CircleLoader`
- `DotLoader`
- `RingLoader`
- `...`

### 📊 Progress
- `BarLoader`
- `CircularProgress`
- `...`

### 💀 Skeleton
- `PulseLoader`
- `CardSkeleton`
- `...`

### ✍️ Text
- `DotText`
- `TypeWriter`
- `...`

### 🎨 Creative
- `BouncingBalls`
- `FoldingCube`
- `...`

### 🎯 Icon
- `IconSpin`
- `IconPulse`
- `...`

---


## 📚 Documentation

Full documentation, examples, and demos available at:  
👉 [www.react-loaderkit.in](https://www.react-loaderkit.in)

---


## 👨‍💻 Author

**Kushal Khandelwal**  
<a href="https://www.linkedin.com/in/kushal-khandelwal-268349196/" target="_blank">
  <img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin.svg" width="20" alt="LinkedIn" />
</a>
&nbsp;&nbsp;
<a href="https://www.instagram.com/kushal___khandelwal/" target="_blank">
  <img src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg" width="20" alt="Instagram" />
</a>

---


## 🔍 Keywords

`React` · `loaders` · `spinner` · `progress` · `skeleton` · `animation` · `typescript` · `UI components` · `loader animations`

---


## 📄 License

MIT © [Kushal Khandelwal](https://www.linkedin.com/in/kushal-khandelwal-268349196/)

---


Happy coding! ⚡