Merge pull request PriyaGhosal#856 from AryanGupta001/pr/loading

feat: Added skeleton screen loading for home page
sainKunal · Oct 31, 2024 · bd17e9b · bd17e9b
2 parents 47dd0e7 + cabf83c
commit bd17e9b
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 8 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
@@ -59,13 +59,30 @@
 
 <body>
 
-  <!--
-    - PRELOADER
-  -->
+  <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>
+
+    <!-- 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>
+
+<!-- Main Content -->
+<div id="main-content" style="display: none;">
+
+
 
-  <div class="preloader" data-preloader>
-    <div class="circle" data-circle></div>
-  </div>
 
 
 
@@ -1674,7 +1691,7 @@ <h3 class="event-title">Creative Design Thinking</h3>
 
   </footer>
 
-
+</div>
 
    <!--JS for searching courses -->
  <script>
@@ -1764,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>
diff --git a/style.css b/style.css
@@ -237,4 +237,62 @@
   background-color: rgba(0, 0, 0, 0.977);
   transform: scale(1.3);
   color: white;
-}
+}
+/* Basic styles for the skeleton loader */
+.skeleton-loader {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem;
+}
+
+.skeleton {
+  background-color: #e0e0e0;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+/* Different skeleton shapes */
+.skeleton-text {
+  width: 100%;
+  height: 16px;
+}
+
+.skeleton-text.short {
+  width: 60%;
+}
+
+.skeleton-image {
+  width: 100%;
+  height: 200px;
+  border-radius: 8px;
+}
+
+.skeleton-card {
+  width: 100%;
+  height: 150px;
+  border-radius: 8px;
+}
+
+/* Shimmer animation for loading effect */
+.skeleton::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -150px;
+  height: 100%;
+  width: 150px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* Style for the actual content (hidden initially) */
+.content {
+  padding: 2rem;
+}