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 jQuery library on the web page.

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

$(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 + "%");
    
  });
});

3. Apply your 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;
}

See Demo And Download