A Nice Scroll Progress Indicator With jQuery

Scroll indicator is a tutorial on how to create a thin, thin progress bar using jQuery / CSS to indicate the extent to which the page scrolled down.

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

How to make use of it:

1. Create the HTML for the scroll progress bar.

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

2. Include the mandatory jQuery library on the web page.

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

3. Add a listener for scroll occasion, calculate the share of web page scroll relative to the height of your complete web page, after which 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 individual CSS types 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;
}

Slim Scroll Progress Indicator, scroll indicator Plugin/Github, vertical scroll progress bar, smooth back to top button with scroll progress indicator, home back to top with progress indicator, circle scroll indicator, reading progress bar