Added Progressbar

GarimaSingh0109 · Oct 13, 2024 · 4e98142 · 4e98142
1 parent 04eacc6
commit 4e98142
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 1 deletion.
diff --git a/about.html b/about.html
@@ -308,10 +308,49 @@
     }
 }
 
+#progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: white;
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            height: 100%;
+            background-color: #3f10ea;
+        }
+
     </style>
 </head>
 <body>
 
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+    let lastScrollPercentage = 0; 
+
+    function updateProgressBar() {
+        const scrollTop = window.scrollY; 
+        const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
+        const scrollPercentage = (scrollTop / windowHeight) * 100; 
+
+        const progressBar = document.getElementById('progress-bar');
+
+
+        lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
+        progressBar.style.width = lastScrollPercentage + '%'; 
+    }
+    window.addEventListener('scroll', updateProgressBar);
+
+      </script>
+
    <!-- Navbar -->
    <nav class="navbar">
     <img src="images/logo.png" alt="logo">

diff --git a/index.html b/index.html
@@ -671,12 +671,52 @@
       .scroll-to-top i {
         font-size: 20px;
       }
+
+      #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: white;
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            height: 100%;
+            background-color: #3f10ea;
+        }
+
     </style>
   </head>
 
   <body>
     <!-- header section starts -->
 
+    <div id="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <script>
+  let lastScrollPercentage = 0; 
+
+  function updateProgressBar() {
+      const scrollTop = window.scrollY; 
+      const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
+      const scrollPercentage = (scrollTop / windowHeight) * 100; 
+
+
+      const progressBar = document.getElementById('progress-bar');
+
+
+      lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
+      progressBar.style.width = lastScrollPercentage + '%'; 
+  }
+  window.addEventListener('scroll', updateProgressBar);
+
+    </script>
 
     <!-- Scripts -->
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

diff --git a/resume.html b/resume.html
@@ -335,9 +335,50 @@
           font-size: 22px;
         }
       }
+
+      #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: white;
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            height: 100%;
+            background-color: #3f10ea;
+        }
+
     </style>
   </head>
   <body>
+
+    <div id="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <script>
+  let lastScrollPercentage = 0; 
+
+  function updateProgressBar() {
+      const scrollTop = window.scrollY; 
+      const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
+      const scrollPercentage = (scrollTop / windowHeight) * 100; 
+
+      const progressBar = document.getElementById('progress-bar');
+
+
+      lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
+      progressBar.style.width = lastScrollPercentage + '%'; 
+  }
+  window.addEventListener('scroll', updateProgressBar);
+
+    </script>
+
     <!-- Navbar -->
     <nav class="navbar">
         <img src="images/logo.png" alt="logo">

diff --git a/resume_tips.html b/resume_tips.html
@@ -244,10 +244,50 @@
             margin-bottom:20px;
             cursor: pointer; /* Change cursor to pointer */
         }
-
+
+         #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: white;
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            height: 100%;
+            background-color: #3f10ea;
+        }
+
     </style>
 </head>
 <body>
+
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+    let lastScrollPercentage = 0; 
+
+    function updateProgressBar() {
+        const scrollTop = window.scrollY; 
+        const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
+        const scrollPercentage = (scrollTop / windowHeight) * 100; 
+
+        const progressBar = document.getElementById('progress-bar');
+
+
+        lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
+        progressBar.style.width = lastScrollPercentage + '%'; 
+    }
+    window.addEventListener('scroll', updateProgressBar);
+
+      </script>
+
    <!-- Navbar -->
    <nav class="navbar">
     <img src="images/logo.png" alt="logo">