Merge pull request #776 from Shariq2003/AdditionOfProgressBar

sanjay-kv · web-flow · commit c8cca1e21502 · 2024-10-12T23:25:38.000+11:00
Addition of Progress Bar | Issue #748
diff --git a/index.html b/index.html
@@ -20,6 +20,9 @@
     <script src="https://unpkg.com/scrollreveal"></script>
   </head>
   <body>
+    <div id="progressBarContainer">
+        <div id="progressBar"></div>
+    </div>
     <nav class="navbar">
       <div class="navbar-left" onclick="window.location.href=`index.html`">
         <img src="assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
diff --git a/scripts/ScrollToTop.js b/scripts/ScrollToTop.js
@@ -39,3 +39,16 @@ function scrollToTop() {
 
   requestAnimationFrame(animation); // Start the animation
 }
+
+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 + "%";
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -1391,3 +1391,20 @@ a {
   right: 10px;
   cursor: pointer;
 }
+
+#progressBarContainer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 7px;
+    background-color: #333; 
+    z-index: 9999; 
+  }
+  
+  #progressBar {
+    height: 100%;
+    width: 0%; 
+    background: white;
+    transition: width 0.2s ease; 
+  }
