diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css
index d29c200..5332b22 100644
--- a/assets/css/bootstrap-style.css
+++ b/assets/css/bootstrap-style.css
@@ -13018,11 +13018,11 @@ h6, .h6 {
 }
 
 #loading-indicator {
-  height: 4px;
-  animation: rolling-something 1s linear infinite;
-  background-image: repeating-linear-gradient(-0.25turn, #118bee 0vw, transparent 40vw);
-  background-size: 80vw auto;
-  will-change: opacity;
+  height: 0.5rem;
+  animation: wave-motion 3s ease-in-out infinite;
+  background-image: linear-gradient(90deg, transparent, var(--bs-custom-color), transparent);
+  background-size: 200% 100%;
+  will-change: opacity, background-position;
   transition: opacity 0.3s;
   opacity: 0;
 }
@@ -13031,13 +13031,46 @@ h6, .h6 {
   transition-duration: 1s;
   transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
+@media (max-width: 576px) {
+  #loading-indicator {
+    height: 0.3rem;
+    animation-duration: 2s;
+    background-size: 150% 100%;
+  }
+  #loading-indicator.htmx-request {
+    transition-duration: 0.5s;
+  }
+}
+@media (min-width: 577px) and (max-width: 992px) {
+  #loading-indicator {
+    height: 0.4rem;
+    animation-duration: 2.5s;
+    background-size: 175% 100%;
+  }
+  #loading-indicator.htmx-request {
+    transition-duration: 0.75s;
+  }
+}
+@media (min-width: 993px) {
+  #loading-indicator {
+    height: 0.5rem;
+    animation-duration: 3s;
+    background-size: 200% 100%;
+  }
+  #loading-indicator.htmx-request {
+    transition-duration: 1s;
+  }
+}
 
-@keyframes rolling-something {
+@keyframes wave-motion {
   0% {
-    background-position-x: 0vw;
+    background-position: 100% 0;
+  }
+  50% {
+    background-position: 0% 0;
   }
   100% {
-    background-position-x: 40vw;
+    background-position: -100% 0;
   }
 }
 
diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss
index 6b7e1bf..65903d0 100644
--- a/assets/css/bootstrap-style.scss
+++ b/assets/css/bootstrap-style.scss
@@ -279,16 +279,16 @@ h6 {
 }
 
 /// Loading indicator for hx-requests
-/// ref: https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
+/// ref (old): https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
 #loading-indicator {
-  height: 4px;
+  height: 0.5rem;
 
   /// background-size: 200px auto;
-  animation: rolling-something 1s linear infinite;
-  background-image: repeating-linear-gradient(-0.25turn, #118bee 0vw, transparent 40vw);
-  background-size: 80vw auto;
+  animation: wave-motion 3s ease-in-out infinite;
+  background-image: linear-gradient(90deg, transparent, var(--bs-custom-color), transparent);
+  background-size: 200% 100%;
 
-  will-change: opacity;
+  will-change: opacity, background-position;
   transition: opacity 0.3s;
   opacity: 0;
 
@@ -297,14 +297,49 @@ h6 {
     transition-duration: 1s;
     transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   }
+
+  // Responsive adjustments
+  @media (max-width: 576px) {
+    height: 0.3rem;
+    animation-duration: 2s;
+    background-size: 150% 100%;
+
+    &.htmx-request {
+      transition-duration: 0.5s;
+    }
+  }
+
+  @media (min-width: 577px) and (max-width: 992px) {
+    height: 0.4rem;
+    animation-duration: 2.5s;
+    background-size: 175% 100%;
+
+    &.htmx-request {
+      transition-duration: 0.75s;
+    }
+  }
+
+  @media (min-width: 993px) {
+    height: 0.5rem;
+    animation-duration: 3s;
+    background-size: 200% 100%;
+
+    &.htmx-request {
+      transition-duration: 1s;
+    }
+  }
 }
 
-@keyframes rolling-something {
+@keyframes wave-motion {
   0% {
-    background-position-x: 0vw
+    background-position: 100% 0;
+  }
+
+  50% {
+    background-position: 0% 0;
   }
 
   100% {
-    background-position-x: 40vw
+    background-position: -100% 0;
   }
 }
diff --git a/assets/views/layout/default.jet.html b/assets/views/layout/default.jet.html
index 6ed09ce..bddaa27 100644
--- a/assets/views/layout/default.jet.html
+++ b/assets/views/layout/default.jet.html
@@ -62,7 +62,7 @@
 </head>
 
 <body class="bg-black">
-  <div id="loading-indicator" class="fixed-top z-3"></div>
+  <div id="loading-indicator" class="fixed-top z-3" aria-live="polite"></div>
   <!-- mb-4 for spacing between the navbar and main content -->
   <nav class="navbar bg-charcoal-surface1 py-3 mb-4" id="main-navbar">
     <div class="container">