diff --git a/components/UI/MainLoader.js b/components/UI/MainLoader.js
index ae1e85b2..b42d22d4 100644
--- 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 = () => {
-
+
@@ -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,10 +55,10 @@ 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",
},
@@ -59,19 +66,30 @@ const styles = {
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;
\ No newline at end of file