feat: Add loading bar for page changes

assets/js/loadingBar.js

@@ -0,0 +1,10 @@
+const loadingBar = document.querySelector(".o-loading-bar");
+
+document.addEventListener("click", (e) => {
+  const link = e.target.closest("a");
+  if (!link) return;
+  if (link.target === "_blank") return;
+  if (link.pathname === window.location.pathname) return;
+  if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+  loadingBar.classList.add("o-loading-bar--active");
+});

assets/js/main.js

@@ -11,3 +11,4 @@ import "./expander.js";
 import "./dialog.js";
 import "./fipValidityComparison.js";
 import "./search.js";
+import "./loadingBar.js";

assets/sass/loadingBar.scss

@@ -0,0 +1,14 @@
+.o-loading-bar {
+  position: absolute;
+  bottom: -0.3rem;
+  left: 0;
+  width: 0;
+  height: 0.3rem;
+  background-color: var(--link-default);
+  pointer-events: none;
+
+  &--active {
+    transition: width 8s cubic-bezier(0.1, 0.5, 0.2, 1);
+    width: 100%;
+  }
+}

assets/sass/main.scss

@@ -26,3 +26,4 @@
 @import "dialog.scss";
 @import "fip-validity.scss";
 @import "404.scss";
+@import "loadingBar.scss";

layouts/baseof.html

@@ -15,6 +15,7 @@
           {{ partial "navigation.html" . }}
         </nav>
       </div>
+      <div class="o-loading-bar" aria-hidden="true"></div>
     </div>
     <main
       id="content"