initial commit

src/components/Loader/PageLoader.module.scss

@@ -0,0 +1,53 @@
+.loaderContainer {
+  position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 15%;
+    margin-bottom: 15%;
+    height: 100%;
+    width: 100%;
+   min-height: max-content;
+   @media screen and (max-width:768px) {
+    
+    margin-top: 50%;
+    margin-bottom: 0;
+   }
+  }
+  
+  .dotWaveLoader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+  
+  .dot {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: #888888;
+    display: inline-block;
+    animation: wave 1.3s infinite ease-in-out;
+  }
+  
+  .dot:nth-child(1) {
+    animation-delay: 0s;
+  }
+  
+  .dot:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  
+  .dot:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+  
+  @keyframes wave {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-15px);
+    }
+  }

src/components/Loader/index.jsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from "react";
+import styles from "./PageLoader.module.scss";
+
+export const Loader = () => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    return () => setLoading(false);
+  }, []);
+
+  return loading ? (
+    <div className={styles.loaderContainer}>
+      <div className={styles.dotWaveLoader}>
+        <div className={styles.dot}></div>
+        <div className={styles.dot}></div>
+        <div className={styles.dot}></div>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default Loader;

src/components/Loader/pageLoader.jsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+const PageLoader = () => {
+  useEffect(() => {
+    NProgress.start(); 
+    return () => NProgress.done(); 
+  }, []);
+
+  return null;
+};
+
+export default PageLoader;