Merge pull request #206 from shashankgoud18/feature/scroll-progress-bar

Added Scroll Progress Bar
swaraj-das · Oct 8, 2024 · 8e3dc1b · 8e3dc1b
2 parents 4da66ee + a97d149
commit 8e3dc1b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 2 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
diff --git a/index.html b/index.html
@@ -12,6 +12,10 @@
 </head>
 
 <body>
+    <div id="progressBarContainer">
+        <div id="progressBar"></div>
+    </div>
+
         <div class="container">
 
             <div class="navbar">

diff --git a/script.js b/script.js
@@ -8,7 +8,19 @@ 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 + "%";
+  }
+
 document.addEventListener('DOMContentLoaded', () => {
     console.log("Website loaded successfully!");
 });
@@ -53,3 +65,5 @@ window.onload = () => {
         themeToggle.checked = true;
     }
 };
+
+
diff --git a/style.css b/style.css
@@ -87,6 +87,22 @@ button[type="submit"]:hover {
     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; 
+  }
 *.dark-mode{
     background-color: #493d3d;
     color:#f1f1f1;