feat: Add skeleton loading screen in home page

PriyaGhosal · Oct 31, 2024 · cabf83c · cabf83c
1 parent e926330
commit cabf83c
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 41 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -2376,3 +2376,56 @@ body {
   }
 }
 
+.skeleton {
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Hero section */
+.skeleton-hero {
+  width: 100%;
+  height: 250px;
+  margin-bottom: 1.5rem;
+}
+
+/* Category cards */
+.skeleton-category-section {
+  display: flex;
+  gap: 1rem;
+}
+.skeleton-category {
+  width: 30%;
+  height: 100px;
+}
+
+/* Featured courses */
+.skeleton-courses-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.skeleton-course {
+  width: 48%;
+  height: 150px;
+  margin-bottom: 1rem;
+}
+
+/* Loading animation */
+.skeleton::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
diff --git a/index.html b/index.html
@@ -57,53 +57,32 @@
 <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 <link rel="stylesheet" href="registor_btn.css" />
 
-<body>
-  <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SkillWise Homepage</title>
-    <link rel="stylesheet" href="style.css"> <!-- Link to your CSS file -->
-</head>
 <body>
 
-<!-- Skeleton loader section -->
-<div class="skeleton-loader">
-    <div class="skeleton skeleton-text"></div>
-    <div class="skeleton skeleton-text short"></div>
-    <div class="skeleton skeleton-image"></div>
-    <div class="skeleton skeleton-card"></div>
-</div>
+  <div id="skeleton-loader" style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
+    <!-- Hero Section Placeholder -->
+    <div class="skeleton skeleton-hero"></div>
+
+    <!-- Category Cards Placeholder -->
+    <div class="skeleton-category-section">
+        <div class="skeleton skeleton-category"></div>
+        <div class="skeleton skeleton-category"></div>
+        <div class="skeleton skeleton-category"></div>
+    </div>
 
-<!-- Actual content, initially hidden -->
-<div class="content" style="display: none;">
-    <h1>Welcome to SkillWise!</h1>
-    <p>This is the actual content that will appear after loading.</p>
-    <img src="path/to/image.jpg" alt="SkillWise image">
+    <!-- Featured Courses Placeholder -->
+    <div class="skeleton-courses-section">
+        <div class="skeleton skeleton-course"></div>
+        <div class="skeleton skeleton-course"></div>
+        <div class="skeleton skeleton-course"></div>
+    </div>
 </div>
 
-<script>
-    // Simulate loading time, toggle skeleton and content visibility
-    document.addEventListener("DOMContentLoaded", () => {
-        setTimeout(() => {
-            document.querySelector('.skeleton-loader').style.display = 'none';
-            document.querySelector('.content').style.display = 'block';
-        }, 2000); // Adjust delay based on loading time
-    });
-</script>
-
-</body>
-</html>
-
+<!-- Main Content -->
+<div id="main-content" style="display: none;">
+
 
-  <!--
-    - PRELOADER
-  -->
 
-  <div class="preloader" data-preloader>
-    <div class="circle" data-circle></div>
-  </div>
 
 
 
@@ -1712,7 +1691,7 @@ <h3 class="event-title">Creative Design Thinking</h3>
 
   </footer>
 
-
+</div>
 
    <!--JS for searching courses -->
  <script>
@@ -1802,6 +1781,15 @@ <h3 class="event-title">Creative Design Thinking</h3>
   <!-- Bootstrap JS Bundle (Optional) -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 
+ <script>
+    window.addEventListener("load", function() {
+      setTimeout(() => {
+          document.getElementById("skeleton-loader").style.display = "none";
+          document.getElementById("main-content").style.display = "block";
+      }, 1000); // 1 second delay
+    });
+  </script> 
+
 </body>
 
 </html>