react-custom-spinner
Version:
A collection of customizable and lightweight React CSS loader components.
107 lines (77 loc) • 2.12 kB
Markdown
# React Custom Spinner
> 🎡 A collection of beautiful and customizable React loader/spinner components.
## 📺 Demo
Check out the live demo of loaders gallery here:
[Live Demo Link](https://react-custom-spinner.vercel.app)
## ✨ Features
- 🎨 Multiple spinner types (Circle, ZigZag, etc.)
- 🛠 Fully customizable (size, color, speed)
- 💡 Easy to use in React projects
- 🔥 Lightweight and optimized
## 📦 Installation
```bash
npm install react-custom-spinner
# or
yarn add react-custom-spinner
```
## 🚀 Usage
```jsx
import React from "react";
import { CircleLoader, ZigZagLoader } from "react-custom-spinner";
function App() {
return (
<div style={{ display: "flex", gap: "20px" }}>
<CircleLoader loading size="50px" color="red" />
<ZigZagLoader loading size="30px" color="blue" />
</div>
);
}
export default App;
```
## 🛠 Props
| Prop | Type | Default | Description |
| --------- | --------- | -------- | -------------------- |
| `loading` | `boolean` | `true` | Show/hide the loader |
| `size` | `string` | `"40px"` | Size of the loader |
| `color` | `string` | `"#000"` | Color of the loader |
## 🖼 Available Loaders
- `CircleLoader`
- `ZigZagLoader`
- `RotatingSquare`
- `BarsLoader`
- `DotsWave`
- `DualRing`
- `FadingDots`
- `GrowingBars`
- `PulseCircle`
- `RippleLoader`
- `BlinkingLoader`
- `BounceCircleLoader`
- `CubeBounceLoader`
- `FlipDotLoader`
- `HeartbeatLoader`
- `PuffLoader`
- `PulseSquareLoader`
- `RingBounceLoader`
- `RipplePulseLoader`
- `ShimmerLineLoader`
- `SlideInBarsLoader`
- `SpinBubbleLoader`
- `SpinDotsLoader`
- `StretchBarLoader`
- `TunnelSpinner`
## 👨💻 Author
- **Pratik Hole**
## 📄 License
This project is licensed under the ISC License.