.load
.load-text
.container

html
  overflow-x: hidden
  margin: 0
  padding: 0

.container
  width: 100vw
  height: 500vh
  background: linear-gradient(rgba(74,42,71, .9), rgba(231,131,82, .9))
  
.load
  width: 0
  height: 10px
  position: fixed
  transition: all .2s ease
  top: 0
  left: 0
  background:
    image: linear-gradient(to right, rgba(74,42,71,1) 0%,rgba(231,131,82,1) 22%,rgba(146,146,146,1) 35%,rgba(100,181,163,1) 53%,rgba(100,181,163,1) 53%,rgba(74,42,71,1) 76%,rgba(146,146,146,1) 95%)
    
.load-text
  float: left
  position: fixed
  top: 20px
  left: 10px
  width: 10vw
  height: 5vh
  font-size: 2em
  color: rgba(74,42,71,1)

var load = document.querySelector('.load');
var loadText = document.querySelector('.load-text');

// get all document height
var scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

// get viwport height
var vHeight = document.documentElement.clientHeight;

var stopPosition = scrollHeight - vHeight;

// convert window.pageYOffset, and stopPosition
// return percent vale
function getProcent(stopPos, curPos){
  var percent = stopPos / 100;
  var curPercent = curPos / percent;
  return curPercent;
}

window.addEventListener('scroll', function(){
  var curPosition = window.pageYOffset;
  var w = Math.round(getProcent(stopPosition, curPosition)) + '%';
  load.style.width = w;
 loadText.innerHTML = w;
})