update

src/Components/Loaders/FullscreenLoaders.jsx

@@ -1,18 +1,19 @@
 import { Box, Spinner, Text } from "@chakra-ui/react";
 import React from "react";
-import './FullscreenLoaders.css'
+import "./FullscreenLoaders.css";
 
-const FullscreenLoaders = ({height}) => {
+const FullscreenLoaders = ({ height }) => {
   return (
     <Box
       display={"flex"}
       justifyContent={"center"}
-      flexDirection={'column'}
+      flexDirection={"column"}
       alignItems={"center"}
       w={"100%"}
-      h={height ? height: "100vh"}
+      h={height ? height : "100vh"}
       gap={4}
-    ><div className="dot-spinner">
+    >
+      {/* <div className="dot-spinner">
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
@@ -21,8 +22,17 @@ const FullscreenLoaders = ({height}) => {
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
-</div>
-  {/* <Text color='#004717' fontSize={'md'} fontWeight={500}>Loading...</Text> */}
+</div> */}
+      {/* <Text color='#004717' fontSize={'md'} fontWeight={500}>Loading...</Text> */}
+      {/* <div className="spinner-grow" style={{backgroundColor:"#004118"}} role="status" /> */}
+
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="#fff"
+        color="#004118"
+        size="lg"
+      />
     </Box>
   );
 };

src/Components/Loaders/Loader01.jsx

@@ -1,19 +1,29 @@
 import React from "react";
-import './FullscreenLoaders.css'
+import "./FullscreenLoaders.css";
+import { Spinner } from "@chakra-ui/react";
 
 const Loader01 = () => {
   return (
+    // <div className="dot-spinner">
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    // </div>
 
-    <div className="dot-spinner">
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-    </div>
+    // {/* <div className="spinner-grow" style={{backgroundColor:"#004118"}} role="status" /> */}
+
+    <Spinner
+      thickness="4px"
+      speed="0.65s"
+      emptyColor="#fff"
+      color="#004118"
+      size="lg"
+    />
   );
 };
 

src/Pages/SplashScreen.jsx

@@ -1,31 +1,41 @@
-import { Box, Image, Spinner, Text } from '@chakra-ui/react'
-import React from 'react'
-import logo from '../assets/logo2.png'
+import { Box, Image, Spinner, Text } from "@chakra-ui/react";
+import React from "react";
+import logo from "../assets/logo2.png";
 
 const SplashScreen = () => {
   return (
     <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={10}
+      h={"100vh"}
+      display={"flex"}
+      justifyContent={"center"}
+      alignItems={"center"}
+      flexDirection={"column"}
+      gap={10}
     >
-        <Image src={logo} />
-        {/* <Spinner color='green.900' size='md' /> */}
-        <div className="dot-spinner">
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-</div>
-    </Box>
-  )
-}
+      <Image src={logo} />
 
-export default SplashScreen
+      {/* <div className="spinner-grow" style={{backgroundColor:"#004118"}} role="status" /> */}
+      {/* <Spinner color='green.900' size='md' /> */}
+      {/* <div className="dot-spinner">
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+</div> */}
+
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="#fff"
+        color="#004118"
+        size="lg"
+      />
+    </Box>
+  );
+};
+
+export default SplashScreen;