Update index.html

arghadipmanna101 · Jul 24, 2024 · a1b8e53 · a1b8e53
1 parent 9800fee
commit a1b8e53
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/plus/index.html b/plus/index.html
@@ -13,9 +13,47 @@
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
     <link rel="stylesheet" href="plus.css" />
+    <style>
+         #progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 53%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(153, 187, 255) 50%, rgb(0, 184, 250) 100%);
+    box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+
+
+    </style>
 </head>
 
 <body>
+
+<div id="progress-container">
+    <div id="progress-bar"></div>
+  </div>
+
+  <script>
+
+    window.addEventListener('scroll', function() {
+        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        document.getElementById('progress-bar').style.width = scrolled + '%';
+    });
+    </script>
+
+
     <header id="header-plus" class="text-center text-secondary fs-4">
         This is Header
     </header>