From b8f866e0452e44ec85c996988ca0b0030bd8cb21 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Tue, 30 Jun 2026 21:58:00 +0200
Subject: [PATCH] feat: Add loading bar for page changes

---
 assets/js/loadingBar.js     | 10 ++++++++++
 assets/js/main.js           |  1 +
 assets/sass/loadingBar.scss | 14 ++++++++++++++
 assets/sass/main.scss       |  1 +
 layouts/baseof.html         |  1 +
 5 files changed, 27 insertions(+)
 create mode 100644 assets/js/loadingBar.js
 create mode 100644 assets/sass/loadingBar.scss

diff --git a/assets/js/loadingBar.js b/assets/js/loadingBar.js
new file mode 100644
index 000000000..84b279fb0
--- /dev/null
+++ b/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");
+});
diff --git a/assets/js/main.js b/assets/js/main.js
index 250f2f335..b1b2f33e4 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -11,3 +11,4 @@ import "./expander.js";
 import "./dialog.js";
 import "./fipValidityComparison.js";
 import "./search.js";
+import "./loadingBar.js";
diff --git a/assets/sass/loadingBar.scss b/assets/sass/loadingBar.scss
new file mode 100644
index 000000000..7abedcf8f
--- /dev/null
+++ b/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%;
+  }
+}
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 3aed6e2f5..9eb78a2f4 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -26,3 +26,4 @@
 @import "dialog.scss";
 @import "fip-validity.scss";
 @import "404.scss";
+@import "loadingBar.scss";
diff --git a/layouts/baseof.html b/layouts/baseof.html
index a8e58f7c8..a19fbb3e1 100644
--- a/layouts/baseof.html
+++ b/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"