diff --git a/page_begin.html b/page_begin.html
index a0fbceced44a8fffd2659effc1986fd53f0fb35c..b86255719e934b2ffdbbacbb19b30337586c2d49 100644
--- a/page_begin.html
+++ b/page_begin.html
@@ -3,6 +3,7 @@
     [markdown_highlight, markdown_highlight_swap] = [markdown_highlight_swap, markdown_highlight]
 </script>
 <progress v-show="!$model.body.progress.show" style="z-index: 1; position: fixed; top: 0;"></progress>
+<progress v-show="$model.body.progress.show" style="z-index: 1; position: fixed; top: 0;" :value="$model.body.progress.value" :max="$model.body.progress.max"></progress>
 <header v-scope="{$template: '#header'}"></header>
 <main v-scope="{$template: '#main'}" class="container" style="padding-top: calc(var(--block-spacing-vertical) + 3.5rem);"></main>
 <footer v-scope="{$template: '#footer'}" class="container" style="padding: calc(var(--block-spacing-vertical) + 3.5rem) 0;"></footer>
diff --git a/page_end.html b/page_end.html
index 8ccf0f8f36a42514ec857d443b70243d17c6736f..d3eec534f3b64532e3e4e8328e38d0ef1761ad42 100644
--- a/page_end.html
+++ b/page_end.html
@@ -16,6 +16,8 @@
             },
             progress: {
                 show: false,
+                value: 0,
+                max: 0,
             },
         }
         $model.body.theme=='light'?window.highlighter.setTheme(window.codeHighlightTheme):window.highlighter.setTheme(window.darkModeCodeHighlightTheme);
diff --git a/page_end/main.js b/page_end/main.js
index 933677c1d5bb2c5551aa9f736b49134aaf7da40f..c391c7664730311d0e5d22650f3fecfa44ac12fa 100644
--- a/page_end/main.js
+++ b/page_end/main.js
@@ -10,6 +10,7 @@ function main() {
                 },
                 posts: [],
             }
+            progress()
             break;
         default:
             $model.main = {
@@ -58,4 +59,11 @@ function httpget(url) {
             r(xhr)
         }
     })
+}
+function progress() {
+    window.$model.body.progress.show = true
+    document.addEventListener('scroll', () => {
+        window.$model.body.progress.max = document.documentElement.scrollHeight - window.innerHeight
+        window.$model.body.progress.value = window.scrollY
+    })
 }
\ No newline at end of file