Added preloader animation

bsoumyata · bsoumyata · commit cd1491ac9ce9 · 2026-03-03T17:17:29.000-06:00
diff --git a/index.html b/index.html
@@ -27,6 +27,56 @@
     />
   </head>
   <body>
+    <style>
+      /* Preloader overlay */
+      #preloader {
+        position: fixed;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        background: #ffffff;
+        z-index: 9999;
+        transition: opacity 300ms ease;
+      }
+      #preloader.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      /* CSS Loader (provided) */
+      /* HTML: <div class="loader"></div> */
+      .loader {
+        width: calc(6 * 30px);
+        height: 50px;
+        display: flex;
+        color: #8d7958;
+        filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
+        clip-path: inset(0 100% 0 0);
+        animation: l12 2s infinite steps(7);
+      }
+      .loader:before {
+        content: "";
+        width: 30px;
+        height: 25px;
+        --c: no-repeat radial-gradient(farthest-side, currentColor 92%, #0000);
+        background:
+          var(--c) left / 70% 70%,
+          var(--c) right / 20% 20%,
+          var(--c) top 0 right 15% / 20% 20%,
+          var(--c) bottom 0 right 15% / 20% 20%;
+      }
+      @keyframes l12 {
+        100% {
+          clip-path: inset(0 -30px 0 0);
+        }
+      }
+    </style>
+
+    <!-- Preloader overlay with CSS loader -->
+    <div id="preloader" role="status" aria-label="Loading">
+      <div class="loader"></div>
+    </div>
+
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { trackProjectClick } from "../analytics";
 import { Swiper, SwiperSlide } from "swiper/react";
 import type { Swiper as SwiperType } from "swiper";
-import { Navigation, Pagination, Keyboard, A11y, Autoplay } from "swiper/modules";
+import { Navigation, Pagination, Keyboard } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
@@ -206,14 +206,13 @@ export default function Projects() {
         </div>
 
         <Swiper
-          modules={[Navigation, Pagination, Keyboard, A11y, Autoplay]}
+          modules={[Navigation, Pagination, Keyboard]}
           spaceBetween={28}
           slidesPerView={1}
           slidesOffsetBefore={40}
           navigation
           pagination={{ clickable: true, dynamicBullets: true }}
-          keyboard={{ enabled: true }}
-          autoplay={{ delay: 5000, disableOnInteraction: true, pauseOnMouseEnter: true }}
+          keyboard={{ enabled: true, onlyInViewport: true, pageUpDown: false }}
           onInit={(swiper: SwiperType) => {
             swiper.el.classList.toggle("fade-left", !swiper.isBeginning);
             swiper.el.classList.toggle("fade-right", !swiper.isEnd);
diff --git a/src/main.tsx b/src/main.tsx
@@ -8,3 +8,16 @@ createRoot(document.getElementById("root")!).render(
     <App />
   </StrictMode>,
 );
+
+// Fade out and remove CSS preloader when the page finishes loading
+const hidePreloader = () => {
+  const el = document.getElementById("preloader");
+  if (!el) return;
+  el.classList.add("hidden");
+  window.setTimeout(() => {
+    el.parentElement && el.parentElement.removeChild(el);
+  }, 350);
+};
+
+// Show the preloader for a fixed 2 seconds
+window.setTimeout(hidePreloader, 2000);
