From 51252cf51e2d0fd7f2f576b7253a212513e40805 Mon Sep 17 00:00:00 2001 From: Shashank Goud Date: Tue, 8 Oct 2024 22:35:11 +0530 Subject: [PATCH] Added Scroll Progress Bar --- .vscode/settings.json | 2 +- index.html | 4 ++++ script.js | 14 ++++++++++++++ style.css | 17 ++++++++++++++++- 4 files changed, 35 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a2913..f673a71b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/index.html b/index.html index a5d87cd5..8f62e5e7 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,10 @@ +
+
+
+
diff --git a/script.js b/script.js index b197ef4d..99897a6f 100644 --- a/script.js +++ b/script.js @@ -8,3 +8,17 @@ function toggleMenu() { menuList.style.maxHeight = "0px"; } } + + window.onscroll = function() { + updateProgressBar(); + }; + + + function updateProgressBar() { + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; + var scrollPercent = (scrollTop / scrollHeight) * 100; + + document.getElementById("progressBar").style.width = scrollPercent + "%"; + } + \ No newline at end of file diff --git a/style.css b/style.css index 8d59ccaf..2fd7c7de 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,22 @@ padding: 0; font-family: sans-serif; } - +#progressBarContainer { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 7px; + background-color: whitesmoke; + z-index: 9999; + } + + #progressBar { + height: 100%; + width: 0%; + background: linear-gradient(to right, #fb5283, #ff3527);; + transition: width 0.2s ease; + } .container { width: 100%; min-height: 100vh;