Scroll_and_progressbar.css

/* 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: #f8b5b5; /* 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 */
  }