From e63ccac6c4ce3ae63d9ed951deef9fff470b5cbd Mon Sep 17 00:00:00 2001 From: kanakmi2007 Date: Fri, 5 Jun 2026 12:56:47 +0530 Subject: [PATCH] feat: add scroll progress indicator --- public/css/style.css | 11 +++++++++++ public/index.html | 4 ++++ public/js/app.js | 20 ++++++++++++++++++++ 3 files changed, 35 insertions(+) diff --git a/public/css/style.css b/public/css/style.css index db9e008..cb12d26 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -701,3 +701,14 @@ input, textarea, select { max-height: 0; opacity: 0; } + +#scroll-progress { + position: fixed; + top: 0; + left: 0; + width: 0%; + height: 4px; + background: #a855f7; + z-index: 9999; + transition: width 0.1s ease; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index eb860eb..9601442 100644 --- a/public/index.html +++ b/public/index.html @@ -38,6 +38,10 @@ + + +
+
diff --git a/public/js/app.js b/public/js/app.js index 425eea5..b6bdc5b 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -373,6 +373,26 @@ return div.innerHTML; } + // --- Scroll Progress Indicator --- + window.addEventListener("scroll", () => { + const scrollTop = document.documentElement.scrollTop; + + const scrollHeight = + document.documentElement.scrollHeight - + document.documentElement.clientHeight; + + const scrollPercent = + (scrollTop / scrollHeight) * 100; + + const progressBar = + document.getElementById("scroll-progress"); + + if (progressBar) { + progressBar.style.width = scrollPercent + "%"; + } + }); + // --- End Scroll Progress Indicator --- + // ─── Init ─── document.addEventListener('DOMContentLoaded', async () => { await loadSettings();