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):

   1npm install chakra-bhumi-loader

Example on HOW TO USE

1
2import { useState } from "react";
3import PageLoader from "./path-to-pageloader/PageLoader";
4
5export default function App() {
6  const [enableGradient, setEnableGradient] = useState(false);
7
8  // Toggle the gradient background
9  const toggleGradient = () => setEnableGradient((prev) => !prev);
10
11  return (
12    <div>
13      <button onClick={toggleGradient}>
14        Toggle Gradient Background
15      </button>
16
17      <PageLoader
18        primaryColor="#ff5733"   // Customize primary color of the loader (outer ring)
19        bgColor="#ffffff"         // Customize background color (default solid color)
20        enableGradient={enableGradient} // Toggle gradient background
21        gradientDirection="to right" // Gradient direction (e.g., 'to right', 'to bottom')
22        gradientColor1="#ff7e5f"  // First color for gradient
23        gradientColor2="#feb47b"  // Second color for gradient
24        gradientColor3="#00c6ff"  // Third color (via) for gradient (optional)
25      />
26    </div>
27  );
28}
29