Как создать progress bar на чистом JavaScript. Линия прогресса для сайта

В данной записи я вас научу создавать Progress Bar. Progress Bar — это линия прогресса, которая увеличивается по мере прокрутки страницы.

HTML

<div id="progress_line"></div>

CSS

#progress_line {
    position: fixed;
    left: 0;
    top: 0;
    width: 0%;
    height: 4px;
    background: red;
}

JavaScript

var line = document.getElementById('progress_line');
window.addEventListener('scroll', progressBar);
       
function progressBar(e) {
   var windowScroll = document.body.scrollTop || 
   document.documentElement.scrollTop;
   var windowHeight = document.documentElement.scrollHeight - 
   document.documentElement.clientHeight; 
   var width_progress_line = windowScroll / windowHeight * 100;
   line.style.width = width_progress_line + '%';
}