Merge pull request #1365 from thevijayshankersharma/loading-effect

Add Loading Effect for Website
jfmartinz · Jun 21, 2024 · 51d6399 · 51d6399
2 parents 3b05e52 + 5ce4708
commit 51d6399
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/new-website/index.html b/new-website/index.html
@@ -29,7 +29,10 @@
 </head>
 
 <body class="bg-white dark:bg-black dark:text-white">
-
+    <!-- Loading Spinner -->
+    <div id="loading-spinner" class="loading-spinner">
+        <div class="spinner"></div>
+    </div>
     <!-- Progress Bar -->
     <div id="progressBar"></div>
     <script>
@@ -354,22 +357,14 @@ <h2 class="footer-title">ResourceHub</h2>
             });
             checkButtonVisibility();
         });
-
-        document.querySelectorAll('.faq-question').forEach(item => {
-            item.addEventListener('click', (event) => {
-                event.preventDefault();
-                item.classList.toggle('open');
-                const answer = item.nextElementSibling;
-                if (answer.style.display === 'block') {
-                answer.style.display = 'none';
-                } else {
-                answer.style.display = 'block';
-                }
-            });
-        });
-
-
+
           </script>
+        <script>
+            // Hide the loading spinner once the page has fully loaded
+            window.addEventListener('load', function() {
+                document.getElementById('loading-spinner').style.display = 'none';
+            });
+        </script>
 </body>
 
 </html>
diff --git a/new-website/style.css b/new-website/style.css
@@ -6,6 +6,37 @@
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
+
+/* Loading Spinner Styles */
+.loading-spinner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.spinner {
+  border: 8px solid #f3f3f3; /* Light grey */
+  border-top: 8px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+
+
 ::-webkit-scrollbar {
   width: 8.5px;
 }