React Loaders Library

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

npm install @akshay-bhalala/loaders

🚀 Quick Usage

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

<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
• GitHub

Happy loading! 🎉

🏷️ Keywords

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