Vertical Gradient Scroll Progress Bar In jQuery And CSS

File Size: 7.62 KB
Views Total: 2056
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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="" 

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.