Merge pull request #879 from tarunkumar2005/develop

fix(spinner): center spinner and enhance design
anmode · Oct 11, 2024 · 90c0d76 · 90c0d76
2 parents feaf836 + 5c22ed9
commit 90c0d76
Showing 1 changed file with 34 additions and 16 deletions.
diff --git a/components/UI/MainLoader.js b/components/UI/MainLoader.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { FaSpinner } from "react-icons/fa";
 
 const MainLoader = () => {
   return (
@@ -10,7 +11,7 @@ const MainLoader = () => {
             <div style={styles.newPreloaderCircle}></div>
             <div style={styles.newPreloaderImg}>
               <div style={styles.newImgWrapper}>
-                <img src="faviconn.png" alt="Loading" style={styles.newImg} />
+                <FaSpinner style={styles.spinnerIcon} />
               </div>
             </div>
           </div>
@@ -22,15 +23,21 @@ const MainLoader = () => {
 
 const styles = {
   newPreloaderContainer: {
-    position: "relative",
+    position: "fixed", 
+    top: 0,
+    left: 0,
     width: "100%",
     height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 1000,
   },
   newLoaderBackground: {
-    // Add necessary styles for new loader background
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "transparent",
   },
   newPreloaderActive: {
-    transition: "all 0.5s",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -48,30 +55,41 @@ const styles = {
     position: "relative",
   },
   newPreloaderCircle: {
-    width: "80px",
-    height: "80px",
+    width: "100px",
+    height: "100px",
     border: "5px solid #f0f0f0",
-    borderTop: "5px solid purple",
+    borderTop: "5px solid #6a0dad",
     borderRadius: "50%",
     animation: "spin 1s linear infinite",
   },
   newPreloaderImg: {
     position: "absolute",
   },
   newImgWrapper: {
-    backgroundColor: "white",
-    width: "80px",
-    height: "80px",
-    borderRadius: "50%",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
   },
-  newImg: {
-    width: "55px",
-    height: "55px",
-    borderRadius: "50%",
+  spinnerIcon: {
+    fontSize: "50px",
+    color: "#6a0dad",
+    animation: "spin 1.5s linear infinite", 
   },
 };
 
-export default MainLoader;
+const spinAnimation = `
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+`;
+
+const styleSheet = document.styleSheets[0];
+styleSheet.insertRule(spinAnimation, styleSheet.cssRules.length);
+
+export default MainLoader;