Create Page Scroll Indicator in 2 simple steps

Scroll Indicator is basically a line which fills up based on how much the user has scrolled in the page. They are usually positioned at the Top of the page but can differ based on the design and requirement.

In this post, we will be implementing Scroll Indicator using JavaScript in two simple steps.

Step 1

We will need a JS file for this “progress_bar.js” with following code in it. And include this JS in all webpage where we want the Scroll Indicator to appear.

progress_bar.js

$(document).ready(function(){
    progressBar('.page-progressbar');
});
window.progressBar = function(selector, options) {
  if(options == null) options = {};
  var object = document.querySelector(selector);
  if(!object) {
    console.error("Object not found with " + selector);
    return null;
  }

/*you can alter these values based on your requirement*/
  var defaults = {
    color: '#D42620',
    size: '5px',
    position: 'top',
    speed: '500',
  };
  object.style.position = "fixed";
  object.style.background = option('color');
  object.style.height = option('size');
  switch (option('position')) {
    case 'bottom':
      object.style.bottom = "0px";
      break;
    default:
      object.style.top = "56px"; /*the distance from top where you want to show the scroll indicator*/
  }
  object.style.transition = "width "+option('speed')+'ms';

  window.addEventListener('scroll', function(e){
    var h = document.documentElement,
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight';
    var percent = parseInt((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
    object.style.width = percent+"vw"
  });
  return object;

  function option(prop) {
    if(options[prop]) return options[prop];
    return defaults[prop];
  }
}

Step 2

In next step, we will simple create an HTML element with class name “page-progressbar” in our actual webpage.

<div style="z-index:99999;" class="page-progressbar"></div>

We will set the z-index of the element to max value so that any other HTML element would not overlap it.

For complete guidance, you may follow this video: