diff --git a/assets/js/loadingBar.js b/assets/js/loadingBar.js
new file mode 100644
index 00000000..84b279fb
--- /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 250f2f33..b1b2f33e 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 00000000..7abedcf8
--- /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 3aed6e2f..9eb78a2f 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 a8e58f7c..a19fbb3e 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"