Spinner

A customizable spinner that provides visual feedback during processing.

Galaxy Spinner

A default spinner for loading state changes.

Preview

import React from "react";

const Spinner = () => {
  return (
    <div className="flex items-center justify-center">
      <div className="h-12 w-12 border-4 border-black border-t-transparent border-solid rounded-full animate-spin"></div>
    </div>
  );
};

export default Spinner;

Usage Example

import React from "react";
import Spinner from "./components/comp/Spinner/GalaxySpinner";

const App = () => {
  return (
    <div>
      <Spinner />
    </div>
  );
};

export default App;

Earth Spinner

A spherical earth-shaped loader that changes color while loading.

Preview

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

const Spinner = () => {
  const [currentColor, setCurrentColor] = useState("bg-black");

  useEffect(() => {
    const colors = [
      "bg-black",
      "bg-red-500",
      "bg-blue-500",
      "bg-green-500",
      "bg-yellow-500"
    ];
    let index = 0;

    const interval = setInterval(() => {
      setCurrentColor(colors[index]);
      index = (index + 1) % colors.length;
    }, 500);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flex items-center justify-center">
      <div className={`w-12 h-12 ${currentColor} rounded-full animate-spin`} />
    </div>
  );
};

export default Spinner;

Usage Example

import React from "react";
import Spinner from "./components/comp/Spinner/EarthSpinner";

const App = () => {
  return (
    <div>
      <Spinner />
    </div>
  );
};

export default App;