scroll bar and progress bar added

agarwalbhargavi · Oct 7, 2024 · d9bf671 · d9bf671
1 parent f620734
commit d9bf671
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 5 deletions.
diff --git a/Scroll_and_progressbar.css b/Scroll_and_progressbar.css
@@ -0,0 +1,70 @@
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 15px; /* Width of the scrollbar */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #f0f0f0; /* Background color of the track */
+    border-radius: 10px; /* Rounded corners for the track */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, #cd61ff, #ec6371); /* Gradient color for the scrollbar */
+    border-radius: 10px; /* Rounded corners for the scrollbar */
+    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a shadow effect */
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, #ff409c, #e763ec); /* Hover effect to change color */
+    cursor: pointer; /* Changes cursor to pointer when hovered */
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background: linear-gradient(45deg, #b222ff, #ff0062); /* Color when scrollbar is clicked */
+  }
+
+  /* Optional: smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Hide scrollbar but keep functionality */
+  .main-body {
+    scrollbar-width: none; /* For Firefox */
+    -ms-overflow-style: none;  /* For IE and Edge */
+  }
+
+  .main-body::-webkit-scrollbar {
+    display: none; /* For Chrome, Safari, and Opera */
+  }
+
+  /* Progress Bar Container */
+.progress-container {
+    width: 100%;
+    height: 10px; /* Height of the progress bar */
+    background-color: #f0f0f0; /* Background color matching scrollbar track */
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for container */
+    position: fixed;
+    overflow: hidden;
+  }
+
+  /* Progress Bar */
+  .progress-bar {
+    width: 0%; /* Initial width (can be dynamically adjusted via JS) */
+    height: 100%;
+    background: linear-gradient(45deg, #cd61ff, #ec6371); /* Gradient matching scrollbar */
+    border-radius: 10px; /* Rounded corners */
+    transition: width 0.3s ease-in-out; /* Smooth transition for width change */
+    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds shadow effect */
+  }
+
+  /* Hover effect for the progress bar */
+  .progress-bar:hover {
+    background: linear-gradient(45deg, #ff409c, #e763ec); /* Hover gradient color */
+  }
+
+  /* Active state (when clicked or progressing) */
+  .progress-bar:active {
+    background: linear-gradient(45deg, #b222ff, #ff0062); /* Active gradient color */
+  }
diff --git a/about.html b/about.html
@@ -54,8 +54,12 @@
     <link rel="icon" type="image/png" sizes="16x16" href="../images/favicon-16x16.png">
     <link rel="manifest" href="../images/site.webmanifest">
     <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"> 
+    <link rel="stylesheet" href="Scroll_and_progressbar.css">
   </head>
 <body>
+    <div class="progress-container">
+        <div class="progress-bar" id="progress-bar"></div>
+      </div>
     <header class="navbar">
         <div class="logo">
             <h2><a class="home-link" href="index.html">WordWise</a></h2>
@@ -648,6 +652,7 @@ <h4>Share this post:</h4>
     <script src="share.js"></script>
     <script src="main.js"></script>
     <script src="darkMode.js"></script>
+    <script src="progress_bar.js"></script>
 
 </body>
 </html>
diff --git a/blog.html b/blog.html
@@ -12,6 +12,7 @@
 
     <!--css-->
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="Scroll_and_progressbar.css">
 
 <style>
   .secondary-title {
@@ -23,6 +24,9 @@
 
 </head>
 <body>
+  <div class="progress-container">
+    <div class="progress-bar" id="progress-bar"></div>
+  </div>
   <header class="navbar">
     <div class="logo">
         <h2><a class="home-link" href="index.html">WordWise</a></h2>
@@ -562,6 +566,7 @@ <h2 class="footer-title secondary-title mt-2">Social</h2>
     <script src="darkMode.js"></script>
     <script src="./backend/login-Auth/login.js"></script>
     <script src="./backend/signup-Auth/signup.js"></script>
+    <script src="progress_bar.js"></script>
     <!--swiper slider cdn-->
 
 </body>

diff --git a/category.css b/category.css
@@ -102,6 +102,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    z-index: -1;
   }
 
   .sliderr {

diff --git a/category.html b/category.html
@@ -16,6 +16,7 @@
     <!--css-->
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="category.css">
+    <link rel="stylesheet" href="Scroll_and_progressbar.css">
 
     <style>
         * {
@@ -27,7 +28,9 @@
 </head>
 
 <body>
-
+    <div class="progress-container">
+        <div class="progress-bar" id="progress-bar"></div>
+      </div>
 
     <!--header-->
     <header class="navbar">
@@ -387,6 +390,7 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
 
     <script src="main.js"></script>
     <script src="./darkMode.js"></script>
+    <script src="progress_bar.js"></script>
 
     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 </body>

diff --git a/contact_us.html b/contact_us.html
@@ -9,6 +9,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="./contact_us.css">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="Scroll_and_progressbar.css">
     <style>
         /* Custom popup styles */
         .popup {
@@ -61,6 +62,9 @@
     </style>
 </head>
 <body>
+    <div class="progress-container">
+        <div class="progress-bar" id="progress-bar"></div>
+      </div>
     <header class="navbar">
         <div class="logo">
             <h2><a class="home-link" href="index.html">WordWise</a></h2>
@@ -159,5 +163,6 @@ <h3>Message Sent</h3>
     </script>
 
     <script src="./darkMode.js"></script>
+    <script src="progress_bar.js"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -17,10 +17,14 @@
 
     <!--css-->
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="Scroll_and_progressbar.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
 </head>
 <body>
+    <div class="progress-container">
+        <div class="progress-bar" id="progress-bar"></div>
+      </div>
     <!--header-->
     <header class="navbar">
         <div class="logo">
@@ -796,6 +800,7 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
     </script>
 
     <script src="faq.js"></script>
+    <script src="progress_bar.js"></script>
     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 </body>
 </html>
diff --git a/progress_bar.js b/progress_bar.js
@@ -0,0 +1,12 @@
+// Function to update the progress bar width as the user scrolls
+function updateProgressBar() {
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    const scrollPercentage = (scrollTop / scrollHeight) * 100;
+
+    document.getElementById('progress-bar').style.width = scrollPercentage + '%';
+  }
+
+  // Event listener for scrolling to update the progress bar
+  window.addEventListener('scroll', updateProgressBar);
+
diff --git a/start.html b/start.html
@@ -12,6 +12,7 @@
     <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
     <!--css-->
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="Scroll_and_progressbar.css">
 
     <style>
       .secondary-title {
@@ -23,6 +24,9 @@
 
 </head>
 <body>
+  <div class="progress-container">
+    <div class="progress-bar" id="progress-bar"></div>
+  </div>
    <!--header-->
    <header class="navbar">
     <div class="logo">
@@ -362,6 +366,7 @@ <h2 class="footer-title secondary-title mt-2">Social</h2>
     <script src="./darkMode.js"></script>
     <script src="./backend/login-Auth/login.js"></script>
     <script src="./backend/signup-Auth/signup.js"></script>
+    <script src="progress_bar.js"></script>
     <!--swiper slider cdn-->
 
 </body>

diff --git a/start_writing.html b/start_writing.html
@@ -16,6 +16,7 @@
     <!--css-->
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="start_writing.css">
+    <link rel="stylesheet" href="Scroll_and_progressbar.css">
 
     <style>
         * {
@@ -27,8 +28,9 @@
 </head>
 
 <body>
-
-
+    <div class="progress-container">
+        <div class="progress-bar" id="progress-bar"></div>
+      </div>
     <!--header-->
     <header class="navbar">
         <div class="logo">
@@ -264,6 +266,7 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
     <script src="start_writing.js"></script>
     <script src="main.js"></script>
     <script src="./darkMode.js"></script>
+    <script src="progress_bar.js"></script>
 
     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 </body>

diff --git a/style.css b/style.css
@@ -51,9 +51,9 @@ body {
 }
 
 /* Hide scrollbar for main body */
-.main-body::-webkit-scrollbar {
+/* .main-body::-webkit-scrollbar {
   display: none;
-}
+} */
 
 /* Header styling */
 header {