<div class="progress-bar"></div>
<div class="very-long-content"></div>
<div class="end">You reached the end</div>
<div class="footer">This is a footer</div>
/* THIS IS WHAT YOU CARE ABOUT */
.progress-bar {
	position: fixed;
	top: 0;
	height: 5px;
	background:yellow;
	z-index:9999;
	transition: width .25s;
}
/* You don't care about this part */
::-webkit-scrollbar {
  display:none;
}
/* You don't care about this part */
.very-long-content {
  width:100%;
  height: 2000px;
  background: blue;
}
/* You don't care about this part */
.end, .footer {
  width: 100%;
  background: red;
  height: 100px;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: Arial;
  font-weight:bold;
  text-transform: uppercase;
}
/* You don't care about this part */
.footer {
  background:orange;
  height: 700px;
}
// The function that will take care of everything
function updateProgressBar() {
  // Retrieve nodes & Scroll value
  const progressBar = document.querySelector(".progress-bar");
  const content = document.querySelector(".very-long-content");
  const scroll = window.pageYOffset;

  // Compute bottom part of the long content
  const endPosition =
    content.offsetTop + content.offsetHeight - window.innerHeight;

  // Compute percent on a 0-100 scale
  const progress = Math.min(Math.ceil(scroll / endPosition * 100), 100);

  // Update progress bar
  progressBar.style.width = `${progress}%`;
}

window.onload = function() {
  // If user has scrolled before the page has fully loaded, update the progress bar to  ensure consistence
  updateProgressBar();

  // On scroll, update the progress bar
  document.addEventListener("scroll", updateProgressBar);
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.