Merge pull request #589 from ShroudAnkit53/bug-fixing

adityai0 · web-flow · commit f9f4225e080b · 2025-08-31T22:57:53.000+05:30
Adding a loader animation
diff --git a/index.html b/index.html
@@ -86,6 +86,13 @@
   </head>
 
   <body>
+    <!-- Loading Screen -->
+    <div id="loading-screen">
+        <div class="loader">
+            <i class="fa-solid fa-spinner"></i>
+            <h2>Loading<span class="dots"></span></h2>
+        </div>
+    </div>
     <a id="top"></a>  <!--added for issue 260 -->
     <!-- ================================ Header Section Start Here ================================ -->
     <header>
@@ -546,5 +553,40 @@ <h5 data-aos-duration="650" data-aos="fade-left" class="footer-title">Contact Us
 
     <!-- ================ Custom JS ================  -->
     <script src="scripts/main.js"></script>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+    const loadingScreen = document.getElementById("loading-screen");
+    const loadingHeading = loadingScreen.querySelector("h2");
+
+    const sentences = [
+        "Loading your experience...",
+        "Almost ready, please wait..."
+    ];
+
+    let index = 0;
+    loadingHeading.innerHTML = sentences[index]; // show first sentence
+
+    // Change sentence every 4 seconds
+    const textInterval = setInterval(() => {
+        index = (index + 1) % sentences.length;
+        loadingHeading.innerHTML = sentences[index];
+        // inside setInterval
+        loadingHeading.classList.add("fade-out");
+setTimeout(() => {
+    loadingHeading.innerHTML = sentences[index];
+    loadingHeading.classList.remove("fade-out");
+}, 500);
+
+    }, 4000);
+
+    // Hide loading screen after 8 seconds
+    setTimeout(() => {
+        clearInterval(textInterval);
+        loadingScreen.classList.add("hidden");
+    }, 8000);
+});
+
+    </script>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -880,3 +880,84 @@ body {
 .icon-container i:hover {
   transform: scale(1.2);
 }
+
+/*Loading page*/
+#loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: white;
+    color: blue;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    transition: opacity 0.5s ease, visibility 0.5s ease;
+}
+
+#loading-screen.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+#loading-screen h2 {
+  transition: opacity 0.5s ease-in-out;
+}
+
+.fade-out {
+  opacity: 0;
+}
+
+
+.loader {
+    text-align: center;
+}
+
+.loader i {
+    font-size: 4.5rem;
+    animation: spin 2s linear infinite;
+}
+
+.loader h2 {
+    margin-top: 1.5rem;
+    font-size: 2.1rem;
+}
+
+.dots::after {
+    content: "";
+    display: inline-block;
+    animation: dots 1.5s steps(5, end) infinite;
+}
+
+@keyframes dots {
+    0% {
+        content: "";
+    }
+    20% {
+        content: ".";
+    }
+    40% {
+        content: "..";
+    }
+    60% {
+        content: "...";
+    }
+    80%{
+        content: "....";
+    }
+    100% {
+        content: "";
+    }
+}
+
+/* Spin Animation */
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
