changed

Mujtabaa07 · Jan 11, 2025 · 8f63961 · 8f63961
2 parents 4e7eb6f + c4ffeed
commit 8f63961
Show file tree

Hide file tree

Showing 7 changed files with 17,730 additions and 9,585 deletions.
diff --git a/index.html b/index.html
@@ -32,6 +32,60 @@
   </head>
 
   <body>
+     <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.0/lottie.min.js" type="text/javascript"></script>
+<style>
+  #preloader {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #988c7a;
+    transition: opacity 0.2s ease; /* change 0.3s to increase or decrease the transition time */
+    opacity: 1;
+    z-index: 9999;
+  }
+  #preloader-lottie {
+  width: 100vw;
+  height: 100vh;
+}
+</style>
+
+<div id="preloader">
+  <div id="preloader-lottie"></div>
+</div>
+
+<script>
+  window.addEventListener("load", () => {
+    const preloader = document.getElementById("preloader");
+    preloader.style.transition = "opacity 0.3s ease"; //change 0.3s to increase or decrease transition time
+    setTimeout(() => {
+      preloader.style.opacity = "0";
+      setTimeout(() => {
+        preloader.style.display = "none";
+      }, 2500); //change 2500 to increase or decrease the total time the preloader plays
+    }, 2500); //change 2500 to increase or decrease the total time the preloader plays
+  });
+
+  lottie.loadAnimation({
+    container: document.getElementById("preloader-lottie"),
+    renderer: "svg",
+    loop: true,
+    autoplay: true,
+    path: "https://lottie.host/e96ec485-3ef5-4d41-ba4c-deefafe65a54/SCXGNd6miI.json", //this is the URL of the lottie file you want to use
+    rendererSettings: {
+      progressiveLoad: false
+    },
+    events: {
+      complete: () => console.log('Preloader works!'),
+      error: (e) => console.error(e)
+    }
+  });
+</script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
@@ -49,8 +103,7 @@
     <button id="scrollToTop" title="Go to top">
       <i class="fa-solid fa-arrow-up fa-lg"></i>
     </button>
-
-
+    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <script type="module" src="/src/index.jsx"></script>
   </body>