Add loading animation while page loads

- Implemented a Bootstrap 5.3.3 spinner to indicate page loading status. - Customized the spinner color to match the requested #1db954 (green). - Centered the spinner on the screen with a semi-transparent background. - Added functionality to hide the spinner once the page is fully loaded using JavaScript.
Ctoic · Oct 14, 2024 · 5c7c0c6 · 5c7c0c6
1 parent a0a746c
commit 5c7c0c6
Show file tree

Hide file tree

Showing 10 changed files with 252 additions and 262 deletions.
diff --git a/about.html b/about.html
@@ -21,6 +21,11 @@
   <body
     class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100"
   >
+  <div id="loader" class="spinner-container">
+    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
     <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
     <header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">
       <nav class="">

diff --git a/adventures.html b/adventures.html
@@ -21,6 +21,11 @@
   <body
     class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100"
   >
+  <div id="loader" class="spinner-container">
+    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
     <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
     <header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">
       <nav class="">

diff --git a/contact.html b/contact.html
@@ -21,6 +21,11 @@
   <body
     class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100"
   >
+  <div id="loader" class="spinner-container">
+    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
     <!-- Navbar -->
     <div id="header-placeholder" class="sticky top-0 z-20"></div>
 

diff --git a/faq.html b/faq.html
@@ -21,6 +21,11 @@
   <body
     class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100"
   >
+  <div id="loader" class="spinner-container">
+    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
     <!-- Navbar -->
     <div id="header-placeholder" class="sticky top-0 z-20"></div>
 

diff --git a/fs.html b/fs.html
@@ -21,6 +21,11 @@
   <body
     class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100"
   >
+  <div id="loader" class="spinner-container">
+    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
     <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
     <header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">
       <nav class="">

diff --git a/index.html b/index.html
@@ -10,30 +10,26 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
     <title>My Favorite Books Music App</title>
-  </head>
-  <body
-    class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100"
-  >
+</head>
+
+<body class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100">
+    <div id="loader" class="spinner-container">
+        <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+
     <!-- Navbar -->
     <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
     <header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">
-      <nav class="">
-        <div class="container mx-auto flex justify-between items-center">
-          <!-- Logo -->
-          <a
-            class="logo-text h3 font-bold d-inline-flex"
-            href="./index.html"
-            class="navbar-brand"
-          >
-            <img
-              src="./Images/lisbook-logo-1.png"
-              alt="Logo"
-              width="40"
-              height="auto"
-              class="align-text-center me-2"
-            />
-            Lisbook
-          </a>
+        <nav class="">
+            <div class="container mx-auto flex justify-between items-center">
+                <!-- Logo -->
+                <a class="logo-text h3 font-bold d-inline-flex" href="./index.html" class="navbar-brand">
+                    <img src="./Images/lisbook-logo-1.png" alt="Logo" width="40" height="auto"
+                        class="align-text-center me-2" />
+                    Lisbook
+                </a>
 
                 <!-- Menu Links and Theme Toggle -->
                 <div id="menu"
@@ -48,32 +44,16 @@
                     <a href="./index.html" class="text-gray-300 hover:text-green-500" id="home">Home</a>
                     <a href="./about.html" class="text-gray-300 hover:text-green-500" id="about">About</a>
 
-            <a href="./contact.html" class="text-gray-300 hover:text-green-500"
-              >Contact</a
-            >
-            <a href="./faq.html" class="text-gray-300 hover:text-green-500"
-              >FAQs</a
-            >
-            <button
-              id="theme-toggle"
-              class="text-gray-300 hover:text-green-500"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-                />
-              </svg>
-            </button>
-          </div>
+                    <a href="./contact.html" class="text-gray-300 hover:text-green-500">Contact</a>
+                    <a href="./faq.html" class="text-gray-300 hover:text-green-500">FAQs</a>
+                    <button id="theme-toggle" class="text-gray-300 hover:text-green-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                        </svg>
+                    </button>
+                </div>
 
                 <!-- Mobile Menu Toggle Button -->
                 <div id="menu-toggle" title="Menu" class="text-gray-300 lg:hidden cursor-pointer">
@@ -137,107 +117,66 @@ <h1 class="modal-title fs-5" id="exampleModalToggleLabel">
         <section class="rounded-5 p-5 my-5">
             <h2 class="display-5 page-title fw-semibold" id="top-audio-books">Top Audio Books</h2>
 
-        <div
-          class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mt-4 align-items-stretch"
-        >
-          <!-- book card -->
-          <div class="col">
-            <div class="features-card border rounded-5 p-4 text-center">
-              <div
-                class="card-cover-container rounded-4 d-flex align-items-center border"
-              >
-                <img
-                  src="./Images/cs.jpg"
-                  class="card-img-top img-fluid"
-                  alt="Audio book cover"
-                />
-              </div>
-              <div class="card-body mt-4">
-                <h4 class="card-title h-6 page-title">God Delusion</h4>
-                <p class="card-text">By Richard Dawkins</p>
-                <a
-                  href="pbd.html"
-                  class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5"
-                  >Discover</a
-                >
-              </div>
-            </div>
-          </div>
-          <!-- book card -->
-          <div class="col">
-            <div class="features-card border rounded-5 p-4 text-center">
-              <div
-                class="card-cover-container rounded-4 d-flex align-items-center border"
-              >
-                <img
-                  src="./Images/Frankestine.jpg"
-                  class="card-img-top img-fluid"
-                  alt="Audio book cover"
-                />
-              </div>
-              <div class="card-body mt-4">
-                <h4 class="card-title h6 page-title">Frankestine</h4>
-                <p class="card-text">By Mary Shelby</p>
-                <a
-                  href="fs.html"
-                  class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5"
-                  >Discover</a
-                >
-              </div>
-            </div>
-          </div>
-          <!-- book card -->
-          <div class="col">
-            <div class="features-card border rounded-5 p-4 text-center">
-              <div
-                class="card-cover-container rounded-4 d-flex align-items-center border"
-              >
-                <img
-                  src="./Images/Adventures_Sherlock_Holmes.jpg"
-                  class="card-img-top img-fluid"
-                  alt="Audio book cover"
-                />
-              </div>
-              <div class="card-body mt-4">
-                <h4 class="card-title h6 page-title">
-                  Adventures of Sherlock Holmes
-                </h4>
-                <p class="card-text">By Sir Arthur Conan Doyle</p>
-                <a
-                  href="adventures.html"
-                  class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5"
-                  >Discover</a
-                >
-              </div>
-            </div>
-          </div>
-          <!-- book card -->
-          <div class="col">
-            <div class="features-card border rounded-5 p-4 text-center">
-              <div
-                class="card-cover-container rounded-4 d-flex align-items-center border"
-              >
-                <img
-                  src="./Images/Sapiens.jpg"
-                  class="card-img-top img-fluid"
-                  alt="Audio book cover"
-                />
-              </div>
-              <div class="card-body mt-4">
-                <h4 class="card-title h6 page-title">
-                  Sapiens: A Brief History of Humankind
-                </h4>
-                <p class="card-text">By Yuval Noah Harari</p>
-                <a
-                  href="rdpd.html"
-                  class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5"
-                  >Discover</a
-                >
-              </div>
+            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mt-4 align-items-stretch">
+                <!-- book card -->
+                <div class="col">
+                    <div class="features-card border rounded-5 p-4 text-center">
+                        <div class="card-cover-container rounded-4 d-flex align-items-center border">
+                            <img src="./Images/cs.jpg" class="card-img-top img-fluid" alt="Audio book cover" />
+                        </div>
+                        <div class="card-body mt-4">
+                            <h4 class="card-title h-6 page-title">God Delusion</h4>
+                            <p class="card-text">By Richard Dawkins</p>
+                            <a href="pbd.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- book card -->
+                <div class="col">
+                    <div class="features-card border rounded-5 p-4 text-center">
+                        <div class="card-cover-container rounded-4 d-flex align-items-center border">
+                            <img src="./Images/Frankestine.jpg" class="card-img-top img-fluid" alt="Audio book cover" />
+                        </div>
+                        <div class="card-body mt-4">
+                            <h4 class="card-title h6 page-title">Frankestine</h4>
+                            <p class="card-text">By Mary Shelby</p>
+                            <a href="fs.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- book card -->
+                <div class="col">
+                    <div class="features-card border rounded-5 p-4 text-center">
+                        <div class="card-cover-container rounded-4 d-flex align-items-center border">
+                            <img src="./Images/Adventures_Sherlock_Holmes.jpg" class="card-img-top img-fluid"
+                                alt="Audio book cover" />
+                        </div>
+                        <div class="card-body mt-4">
+                            <h4 class="card-title h6 page-title">
+                                Adventures of Sherlock Holmes
+                            </h4>
+                            <p class="card-text">By Sir Arthur Conan Doyle</p>
+                            <a href="adventures.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- book card -->
+                <div class="col">
+                    <div class="features-card border rounded-5 p-4 text-center">
+                        <div class="card-cover-container rounded-4 d-flex align-items-center border">
+                            <img src="./Images/Sapiens.jpg" class="card-img-top img-fluid" alt="Audio book cover" />
+                        </div>
+                        <div class="card-body mt-4">
+                            <h4 class="card-title h6 page-title">
+                                Sapiens: A Brief History of Humankind
+                            </h4>
+                            <p class="card-text">By Yuval Noah Harari</p>
+                            <a href="rdpd.html" class="btn btn-bd-primary btn-sm mt-4 px-5 rounded-5">Discover</a>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </section>
+        </section>
 
         <!-- Book details playlist -->
         <section class="row d-flex align-items-stretch rounded-5 p-5">
@@ -264,8 +203,8 @@ <h3 class="text-lg mt-2" id="author-gd1">By Richard Dawkins</h3>
                         <i class="bi bi-heart mx-4 icon-action-btn tooltip-parent tooltip-bottom"
                             id="favourite-btn"><span class="tooltip" id="favourite">Save to Favourites</span></i>
                         <i class="bi bi-share mx-4 icon-action-btn tooltip-parent tooltip-bottom" id="share-btn"
-                            data-bs-target="#exampleModalToggle" data-bs-toggle="modal"><span
-                                class="tooltip" id="share">Share</span></i>
+                            data-bs-target="#exampleModalToggle" data-bs-toggle="modal"><span class="tooltip"
+                                id="share">Share</span></i>
                         <i class="bi bi-chat mx-4 icon-action-btn tooltip-parent tooltip-bottom"
                             id="view-comments-btn"><span class="tooltip" id="view">View comments</span></i>
                     </div>
@@ -321,25 +260,17 @@ <h3 class="text-lg mt-2" id="author-gd1">By Richard Dawkins</h3>
             </div>
         </section>
 
-      <!-- Book buttons navigations -->
-      <section
-        class="row d-flex align-items-stretch rounded-5 p-5 my-5 gx-5 text-center"
-      >
-        <div class="col-md-6">
-          <a
-            href="./index.html"
-            class="text-gray-300 hover:text-green-500 border p-3 d-block rounded-start-5"
-            >Previous Book</a
-          >
-        </div>
-        <div class="col-md-6">
-          <a
-            href="./pbd.html"
-            class="text-gray-300 hover:text-green-500 p-3 border d-block rounded-end-5"
-            >Next Book</a
-          >
-        </div>
-      </section>
+        <!-- Book buttons navigations -->
+        <section class="row d-flex align-items-stretch rounded-5 p-5 my-5 gx-5 text-center">
+            <div class="col-md-6">
+                <a href="./index.html"
+                    class="text-gray-300 hover:text-green-500 border p-3 d-block rounded-start-5">Previous Book</a>
+            </div>
+            <div class="col-md-6">
+                <a href="./pbd.html" class="text-gray-300 hover:text-green-500 p-3 border d-block rounded-end-5">Next
+                    Book</a>
+            </div>
+        </section>
 
         <section class="row rounded-5 p-5 mt-5">
             <!-- Comments Section -->
@@ -359,7 +290,8 @@ <h2 class="display-5 page-title fw-semibold mb-6" id="share1">
                             required></textarea>
                     </div>
                     <div class="text-center">
-                        <button type="submit" class="bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600" id="share2">
+                        <button type="submit" class="bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600"
+                            id="share2">
                             Share comment
                         </button>
                     </div>

diff --git a/pbd.html b/pbd.html
@@ -21,6 +21,11 @@
   <body
     class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100"
   >
+  <div id="loader" class="spinner-container">
+    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
     <!-- Navbar -->
     <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
     <header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">

diff --git a/rdpd.html b/rdpd.html
@@ -21,6 +21,11 @@
   <body
     class="bg-gray-900 text-gray-300 dark-theme d-flex flex-column min-vh-100"
   >
+  <div id="loader" class="spinner-container">
+    <div class="spinner-border" role="status" style="width: 4rem; height: 4rem; color: #1db954;">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
     <!-- <div id="header-placeholder" class="sticky top-0 z-20"></div> -->
     <header class="sticky top-0 z-20 bg-gray-800 p-4 shadow-sm">
       <nav class="">