saranbhoopathyuniqueloader

A lightweight, customizable React loading spinner component with smooth CSS animations.

Installation

npm install saranbhoopathyuniqueloader

Quick Start

import React from "react";
import Spinner from "saranbhoopathyuniqueloader";

function MyComponent() {
  return (
    <div>
      <h1>Loading...</h1>
      <Spinner />
    </div>
  );
}

export default MyComponent;

Props

| Prop | Type | Default | Description | | ------- | -------- | -------- | ----------------------------- | | size | number | 40 | Size of the spinner in pixels | | color | string | "blue" | Color of the spinner |

Examples

Basic Usage

import Spinner from "saranbhoopathyuniqueloader";

// Default spinner (40px, blue)
<Spinner />;

Custom Size

// Large spinner
<Spinner size={80} />

// Small spinner
<Spinner size={20} />

Custom Color

// Red spinner
<Spinner color="red" />

// Green spinner
<Spinner color="#00ff00" />

// Custom RGB color
<Spinner color="rgb(255, 165, 0)" />

Practical Examples

Loading Button

import React, { useState } from "react";
import Spinner from "saranbhoopathyuniqueloader";

function LoadingButton() {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setLoading(false);
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? (
        <>
          <Spinner size={16} color="white" /> Loading...
        </>
      ) : (
        "Click Me"
      )}
    </button>
  );
}

Full Page Loading

import React, { useState, useEffect } from "react";
import Spinner from "saranbhoopathyuniqueloader";

function App() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    // Simulate data fetching
    setTimeout(() => {
      setData("Welcome to my app!");
      setLoading(false);
    }, 3000);
  }, []);

  if (loading) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100vh",
          flexDirection: "column",
        }}
      >
        <Spinner size={50} color="#007bff" />
        <p style={{ marginTop: "20px" }}>Loading your content...</p>
      </div>
    );
  }

  return <div>{data}</div>;
}

Card Loading State

import React from "react";
import Spinner from "saranbhoopathyuniqueloader";

function ProductCard({ loading, product }) {
  return (
    <div
      style={{
        border: "1px solid #ddd",
        borderRadius: "8px",
        padding: "20px",
        minHeight: "200px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      {loading ? (
        <Spinner size={40} color="#666" />
      ) : (
        <div>
          <h3>{product.name}</h3>
          <p>{product.description}</p>
        </div>
      )}
    </div>
  );
}

Styling

The spinner automatically includes its CSS styles. No additional CSS imports needed!

The component uses a smooth rotation animation and is fully responsive.

Browser Support

• Chrome ✅
• Firefox ✅
• Safari ✅
• Edge ✅
• IE 11+ ✅

TypeScript Support

This package includes TypeScript definitions. You can use it in TypeScript projects:

import React from "react";
import Spinner from "saranbhoopathyuniqueloader";

interface Props {
  isLoading: boolean;
}

const MyComponent: React.FC<Props> = ({ isLoading }) => {
  return <div>{isLoading && <Spinner size={50} color="blue" />}</div>;
};

License

ISC

Author

Saran Bhoopathy

Contributing

Issues and pull requests are welcome!

Changelog

1.0.0

• Initial release
• Basic spinner with customizable size and color