Vertical Gradient Scroll Progress Bar In jQuery And CSS

This is a small script that helps you generate a vertical gradient reading progress indicator to replace the native browser scrollbar.

How to use it:

• Best Reading Progress Indicators In JavaScript

How to use it:

1. Create an empty DIV container to hold the scroll progress bar.

<div id="progressbar"></div>

2. Hide the native browser scrollbar.

::-webkit-scrollbar {
  width: 0;
}

3. Style the scroll progress indicator.

#progressbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 15px;
  border-radius: 10px;
  background: linear-gradient(to top, #fcb045, #fd1d1d, #833ab4);
}

4. Include the necessary jQuery JavaScript library (slim build) at the bottom of the web page.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>

5. The main JavaScript (jQuery) script to update the progress bar on page scroll.

$(window).scroll(function() {
  var scroll = $(window).scrollTop(),
  dh = $(document).height(),
  wh = $(window).height();
  scrollPercent = (scroll / (dh - wh)) * 100;
  $("#progressbar").css("height", scrollPercent + "%");
});

---

This awesome jQuery plugin is developed by veeteefunk. For more Advanced Usages, please check the demo page or visit the official website.