Slim Scroll Progress Indicator With jQuery

A tutorial on how to create a slim top progress bar using jQuery/CSS to indicate how far the page has been scrolled down.

Especially suitable for long articles or blog posts to indicate the reading progress in an intuitive way.

How to use it:

1. Create the HTML for the scroll progress bar.

<div class="indicator-wrapper">
  <div class="indicator"></div>
</div>

2. Include the necessary jQuery library on the page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

3. Add a listener for scroll event, calculate the percentage of page scroll relative to the height of the entire page, and then update the scroll progress bar.

$(document).ready(() => {
  //add a listener for scroll
  $(window).scroll(() => {

    //get article's height
    let docHeight = $(".article").height();

    //get window height
    let winHeight = $(window).height();

    //calculate the view port
    let viewport = docHeight - winHeight;

    //get current scroll position
    let scrollPos = $(window).scrollTop();

    //get current scroll percent
    let scrollPercent = (scrollPos / viewport) * 100;

    //add the percent to the top progress bar
    $(".indicator").css("width", scrollPercent + "%");
    
  });
});

4. Apply your own CSS styles to the scroll progress bar.

.indicator-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5px;
}

.indicator {
  width: 0;
  height: 100%;
  background-color: #4F46E5;
  box-shadow: 0 2px 5px #4F46E5;
}

---

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