fixed loader

src/_includes/webc/c-loader.webc

@@ -0,0 +1,48 @@
+<div id="loader" webc:root="override"><span class="loader"></span></div>
+
+<style webc:scoped>
+  @keyframes fade{
+    0%{
+      background-position:-50% 50%;
+      opacity: 0;
+    }
+    50%{
+      background-position:200% 50%;
+      opacity: 1;
+    }
+    100%{
+      background-position:400% 50%;
+      opacity: 0;
+    }
+  }
+
+  :host{
+    display: none;
+    width: 100%;
+    height: 6px;
+    position: absolute;
+    left: 0; top: 0;
+    overflow: hidden;
+  } 
+
+  :host .loader{
+    animation: fade 2s infinite;
+    width: 100vw;
+    display: block;
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    background: linear-gradient( 90deg, hwb(var(--blueHWB)/0), hwb(var(--blueHWB)/0.5), hwb(var(--blueHWB)/0));
+    background-size: 75% 100%;
+  }
+
+</style>
+<style>
+  /* show loader animaton shimmer bar, when requests are being made */
+  body:has(#nav .htmx-request, #content a.htmx-request) #loader,
+  body:has(.htmx-request) #loader
+  {
+    display: block;
+  }
+</style>