Added scroll progress indicator bar

index.html

@@ -42,7 +42,7 @@
         <div class="loader-section section-left"></div>
         <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,9 @@
+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

@@ -204,7 +204,15 @@ html {
     line-height: 1.4;
     scroll-behavior: smooth;
 }
-
+#progress-bar{
+    --progress: 0;
+    position: fixed;
+    height: 8px;
+    width: var(--progress);
+    background:linear-gradient(45deg,rgb(135, 113, 243),rgb(101, 74, 240));
+    z-index: 1000;
+    border-radius: 4px;
+}
 header {
     position: sticky;
     top: 0;