PageLoader Component

The PageLoader component is a customizable loading spinner with dynamic gradient background support. It allows you to set primary colors, background colors, and gradient directions to match the design of your application. It also offers the option to display a smooth loading animation with multiple rings and a pulsing dot at the center.

Features

• Customizable primary and background colors
• Optional gradient background with configurable direction and colors
• Loading spinner animation with three rings and a center dot
• Smooth transition between gradient and solid background
• Easy to integrate with React applications

Installation

To install the PageLoader component, simply add the required CSS and include the component in your React application.

1. Install the component (assuming it is in a local directory):

   npm install chakra-bhumi-loader

Example on HOW TO USE

import { useState } from "react";
import PageLoader from "./path-to-pageloader/PageLoader";

export default function App() {
  const [enableGradient, setEnableGradient] = useState(false);

  // Toggle the gradient background
  const toggleGradient = () => setEnableGradient((prev) => !prev);

  return (
    <div>
      <button onClick={toggleGradient}>
        Toggle Gradient Background
      </button>

      <PageLoader
        primaryColor="#ff5733"   // Customize primary color of the loader (outer ring)
        bgColor="#ffffff"         // Customize background color (default solid color)
        enableGradient={enableGradient} // Toggle gradient background
        gradientDirection="to right" // Gradient direction (e.g., 'to right', 'to bottom')
        gradientColor1="#ff7e5f"  // First color for gradient
        gradientColor2="#feb47b"  // Second color for gradient
        gradientColor3="#00c6ff"  // Third color (via) for gradient (optional)
      />
    </div>
  );
}