Merge pull request #903 from AbhijitMotekar99/main

Added Animated Preloader : Issue no #836
ANSHIKA-26 · Oct 13, 2024 · 26848c6 · 26848c6
2 parents fc6fc02 + 4e8e7da
commit 26848c6
Showing 1 changed file with 97 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -138,7 +138,79 @@
             margin-left: 10px;
         }
     </style>
+    <style>
+/* Preloader styling */
+.preloader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 50;
+  background: linear-gradient(to right, #f8b5b5, #f98b8b, #f8b5b5); /* Yellow gradient */
+}
+
+/* Text animation */
+.animate-stroke {
+  text-transform: uppercase;
+  animation: stroke 2.5s infinite alternate;
+  stroke-width: 4;
+  stroke: white;
+  font-size: 80px;
+  font-family: "Arial", sans-serif;
+}
+
+/* Keyframes for the stroke animation */
+@keyframes stroke {
+  0% {
+    fill: #fff;
+    stroke: #fd7878;
+    stroke-dashoffset: 25%;
+    stroke-dasharray: 0 50%;
+    stroke-width: 2;
+  }
+
+  70% {
+    fill: #fff;
+    stroke: #fc7e7e;
+  }
+
+  80% {
+    fill: #fff;
+    stroke: #fe8080;
+    stroke-width: 3;
+  }
+
+  100% {
+    fill: #fff;
+    stroke: #ff7e7e;
+    stroke-dashoffset: -25%;
+    stroke-dasharray: 50% 0;
+    stroke-width: 0;
+    text-shadow: 0 0 10px #fff, 0 0 15px whitesmoke;
+  }
+}
+
+/* Initially hide the main content */
+.hidden {
+  display: none;
+}
+
+/* When main content is shown */
+.main-content {
+  display: block;
+  padding: 20px;
+  width: 100vw;
+  min-height: 100vh; /* Ensure it covers at least the full height */
+  padding: 0; /* Reset any padding */
+  margin: 0; /* Remove margin */
+}
+
 
+    </style>
 
     <!-- Script for Navbar Toggle -->
     <script>
@@ -151,17 +223,24 @@
 
 </head>
 
-<body onload="Finish_Loader()">
+<body>
     <!-- pre load -->
-    <div id="loader">
-        <div class="loadingspinner">
-            <div id="square1"></div>
-            <div id="square2"></div>
-            <div id="square3"></div>
-            <div id="square4"></div>
-            <div id="square5"></div>
-        </div>
+    <div class="preloader">
+        <svg viewBox="0 0 1320 300">
+          <text
+            x="50%"
+            y="50%"
+            dy=".35em"
+            text-anchor="middle"
+            class="animate-stroke"
+            style="font-weight: bold;"
+          >
+            Word Wise
+          </text>
+        </svg>
     </div>
+
+    <div class="main-content hidden">
     <div class="progress-container">
         <div class="progress-bar" id="progress-bar"></div>
     </div>
@@ -1507,7 +1586,8 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
                     <p>&copy; <span id="current-year"></span> WordWise. All rights reserved.</p>
                 </div>
             </div>
-        </footer>
+    </footer>
+    </div>
         <!-- .footer -->
         <!-- this script is for twitter icon  starts -->
         <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
@@ -1525,12 +1605,13 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
             document.getElementById('current-year').textContent = new Date().getFullYear();
         </script>
         <script>
-
-            // For Loader Page
-            const preloader = document.querySelector("#loader");
-            function Finish_Loader() {
-                preloader.style.display = "none";
-            }
+        window.addEventListener('load', function() {
+          // Show the preloader for 5 seconds
+          setTimeout(function() {
+            document.querySelector('.preloader').style.display = 'none'; // Hide preloader
+            document.querySelector('.main-content').classList.remove('hidden'); // Show main content
+          }, 5000); // 5 seconds delay
+        });
         </script>
         <script src="script.js"></script>
         <script src="faq.js"></script>