function scrollProgressBar() {
    var getMax = function() {
      return Math.max(
        document.body.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight,
        document.documentElement.offsetHeight
      );
    };
  
    var getValue = function() {
      return window.pageYOffset || document.documentElement.scrollTop;
    };
  
    var progressBar = document.querySelector(".progress-bar");
    var max = getMax();
    var value, width;
  
    var getWidth = function() {
      value = getValue();
      width = (value / (max - window.innerHeight)) * 100;
      width = width + "%";
      return width;
    };
  
    var setWidth = function() {
      progressBar.style.width = getWidth();
    };
  
    document.addEventListener("scroll", setWidth);
    window.addEventListener("resize", function() {
      max = getMax();
      setWidth();
    });
  }
  
  document.addEventListener("DOMContentLoaded", function() {
    scrollProgressBar();
  });