Added scroll progress indicator bar

assets/about/about.html

@@ -44,6 +44,8 @@
         <div class="loader-section section-right"></div>
     </div>
 
+    <div id="progress-bar"></div>
+
     <!-- Navigation bar section start  -->
     <header>
         <nav class="navbar">

assets/contact/contact.html

@@ -43,6 +43,8 @@
         <div class="loader-section section-right"></div>
     </div>
 
+    <div id="progress-bar"></div>
+
     <header>
         <nav class="navbar">
             <div class="image-logo">

assets/contributors/contributor.html

@@ -44,6 +44,8 @@
         <div class="loader-section section-right"></div>
     </div>
 
+    <div id="progress-bar"></div>
+
     <header>
         <nav class="navbar">
             <div class="image-logo">

assets/contributors/contributor.js

@@ -1,3 +1,14 @@
+// Progress bar
+const updateProgress = () => {
+    const {
+        scrollTop,
+        scrollHeight
+    } = document.documentElement;
+    const scrollPercent = `${(scrollTop/(scrollHeight-window.innerHeight)) * 100}%`;
+    document.querySelector('#progress-bar').style.setProperty('--progress', scrollPercent);
+}
+document.addEventListener('scroll', updateProgress);
+
 const hamBurger = document.querySelector(".hamburger");
 const nMenu = document.querySelector(".nav-menu");
 

assets/faq/faq.html

@@ -44,6 +44,8 @@
         <div class="loader-section section-right"></div>
     </div>
 
+    <div id="progress-bar"></div>
+
     <!-- Navigation bar section start  -->
     <header style="position: fixed;font-family: 'Montserrat', sans-serif; width: 100%;">
         <nav class="navbar">

index.html

@@ -43,6 +43,8 @@
         <div class="loader-section section-right"></div>
     </div>
 
+    <div id="progress-bar"></div>
+
     <!-- Navigation bar section start  -->
     <header>
         <nav class="navbar">

script.js

@@ -1,3 +1,14 @@
+// Progress Bar
+const updateProgress = () => {
+    const {
+        scrollTop,
+        scrollHeight
+    } = document.documentElement;
+    const scrollPercent = `${(scrollTop/(scrollHeight-window.innerHeight)) * 100}%`;
+    document.querySelector('#progress-bar').style.setProperty('--progress', scrollPercent);
+}
+document.addEventListener('scroll', updateProgress);
+
 window.addEventListener('scroll', () => {
     const sections = document.querySelectorAll('.containers');
     const navLinks = document.querySelectorAll('.nav-links');

style.css

@@ -205,6 +205,16 @@ html {
     scroll-behavior: smooth;
 }
 
+#progress-bar {
+    --progress: 0;
+    position: fixed;
+    height: 8px;
+    width: var(--progress);
+    background: linear-gradient(45deg, rgb(68, 49, 161), rgb(36, 15, 141));
+    z-index: 1000;
+    border-radius: 4px;
+}
+
 header {
     position: sticky;
     top: 0;