diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index 1790bcabc..b9d563c65 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -42,8 +42,23 @@ function notifyNav(url: FullSlug) {
 const cleanupFns: Set<(...args: any[]) => void> = new Set()
 window.addCleanup = (fn) => cleanupFns.add(fn)
 
+function startLoading() {
+  const loadingBar = document.createElement("div")
+  loadingBar.className = "navigation-progress"
+  loadingBar.style.width = "0"
+  if (!document.body.contains(loadingBar)) {
+    document.body.appendChild(loadingBar)
+  }
+
+  setTimeout(() => {
+    loadingBar.style.width = "80%"
+  }, 100);
+}
+
 let p: DOMParser
 async function navigate(url: URL, isBack: boolean = false) {
+  startLoading()
+  // await new Promise((resolve) => setTimeout(resolve, 500))
   p = p || new DOMParser()
   const contents = await fetch(`${url}`)
     .then((res) => {
@@ -104,6 +119,7 @@ async function navigate(url: URL, isBack: boolean = false) {
   if (!isBack) {
     history.pushState({}, "", url)
   }
+
   notifyNav(getFullSlug(window))
   delete announcer.dataset.persist
 }
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 512af0dd0..3802dba6a 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -587,3 +587,15 @@ iframe.pdf {
   width: 100%;
   border-radius: 5px;
 }
+
+
+.navigation-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background: var(--secondary);
+  transition: width 0.2s ease;
+  z-index: 9999;
+}