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.
- 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
Full documentation, examples, and demos are available on the website:
www.react-loaderkit.in
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>
);
}
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) |
CircleLoader
DotLoader
RingLoader
...
BarLoader
CircularProgress
...
PulseLoader
CardSkeleton
...
DotText
TypeWriter
...
BouncingBalls
FoldingCube
...
IconSpin
IconPulse
...
Full documentation, examples, and demos available at:
👉 www.react-loaderkit.in
React
· loaders
· spinner
· progress
· skeleton
· animation
· typescript
· UI components
· loader animations
MIT © Kushal Khandelwal
Happy coding! ⚡