YoutubeProgressBar.js

// 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);
}