🚀 cb-react-smart-loader

A simple, lightweight, and fully customizable React loader component that automatically stays center-aligned and responsive across all screen sizes.

Perfect for dashboards, e-commerce apps, admin panels, APIs, and personal projects.

✨ Features

• ✅ Automatically center-aligned
• 📱 Fully responsive
• 🎨 Customizable size & color
• ⚡ Lightweight & fast
• 🔌 Easy to integrate in any React component
• ❌ No extra CSS required

📦 Installation

npm install cb-react-smart-loader

⚠️ If you face peer dependency issues

npm install cb-react-smart-loader --legacy-peer-deps

🚀 Quick Start

1️⃣ Import the Loader

import SmartLoader from "cb-react-smart-loader";

2️⃣ Use inside your component

import React from "react";
import SmartLoader from "cb-react-smart-loader";

const App = () => {
  return (
    <div>
      {/* Default Loader */}
      <SmartLoader />

      {/* Large loader with red color */}
      {/* <SmartLoader size="lg" color="red" /> */}

      {/* Small loader with custom green color */}
      <SmartLoader size="sm" color="#00ff00" />
    </div>
  );
};

export default App;

⚙️ Props

| Prop | Type | Default | Description | | ----- | ------ | ------- | ------------------------------ | | size | string | md | Loader size (sm, md, lg) | | color | string | #000 | Loader color (any CSS color) |

📐 Available Sizes

• sm – Small
• md – Medium (default)
• lg – Large

Example

<SmartLoader size="lg" color="#ff5733" />

🎯 Why use cb-react-smart-loader?

Most loader components require extra CSS to center them.

cb-react-smart-loader automatically centers itself, saving development time and keeping your UI clean and consistent.

🛠 Built With

• React
• JavaScript (ES6+)
• Pure CSS
• Zero external dependencies

⭐ Support

If you like this package, please ⭐ star it on npm & GitHub It motivates me to build more useful open-source tools ❤️

👨‍💻 Author

Uttam Kumar Frontend / MERN Developer

📄 License

MIT License

Happy Coding! 🚀🔥