Merge pull request #4 from muhammadowaismushtaq/enhancement/ui-update

muhammadowaismushtaq · web-flow · commit 2fe23334b6d5 · 2025-10-23T19:25:05.000+05:00
Added Loader on Page Load
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -974,6 +974,57 @@ textarea.input-field {
     transform: translateY(0);
 }
 
+/* ===== Preloader Styles ===== */
+#preloader {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column; /* Stack GIF and text vertically */
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: #0d1013;
+    transition: opacity 0.45s ease, visibility 0.45s ease;
+    opacity: 1;
+    visibility: visible;
+}
+
+/* ===== Loader GIF ===== */
+#preloader-img {
+    width: 150px;
+    height: 150px;
+    object-fit: contain;
+    user-select: none;
+    -webkit-user-drag: none;
+    display: block;
+}
+
+/* ===== Loading Text ===== */
+.preloader-text {
+    margin-top: 12px; /* gap between GIF and text */
+    font-family: 'Poppins', sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
+    color: #ffffff; /* you can change to #00A9FF for accent */
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    animation: pulse 1.6s ease-in-out infinite;
+}
+
+/* ===== Text Pulse Animation ===== */
+@keyframes pulse {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 1; }
+}
+
+/* ===== Fade-out (applied by JS) ===== */
+#preloader.preloader--hidden {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+}
+
 
 /*-----------------------------------*\
  * #MEDIA QUERIES
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -116,3 +116,43 @@ navLinks.forEach(link => {
         document.body.classList.remove("active");
     });
 });
+
+/**
+ * Easy selector helper function (Used in the existing file structure)
+ */
+const select = (el, all = false) => {
+    el = el.trim();
+    if (all) {
+        return [...document.querySelectorAll(el)];
+    } else {
+        return document.querySelector(el);
+    }
+}
+
+/**
+ * Preloader: fade out after short delay, then remove
+ */
+let preloader = select('#preloader');
+
+if (preloader) {
+    window.addEventListener('load', () => {
+        // ⏳ Force loader to stay for at least 2 seconds
+        setTimeout(() => {
+            preloader.classList.add('preloader--hidden');
+
+            const onTransitionEnd = (e) => {
+                if (e.propertyName === 'opacity') {
+                    preloader.removeEventListener('transitionend', onTransitionEnd);
+                    if (preloader.parentNode) preloader.parentNode.removeChild(preloader);
+                }
+            };
+
+            preloader.addEventListener('transitionend', onTransitionEnd);
+
+            // Fallback removal
+            setTimeout(() => {
+                if (preloader.parentNode) preloader.parentNode.removeChild(preloader);
+            }, 1000);
+        }, 2000); // <-- duration before fade-out (in ms)
+    });
+}
diff --git a/index.html b/index.html
@@ -44,7 +44,10 @@
 </head>
 
 <body class="dark_theme" id="top">
-
+<div id="preloader" aria-hidden="true">
+    <img src="assets/images/loader-01.gif" alt="Loading…" id="preloader-img" />
+    <p class="preloader-text">Loading...</p>
+</div>
 <header class="header" data-header>
     <div class="container">
         <h1 class="h1 logo">
