<body>
    <div class="progress-bar" id="progressBar"></div>
</body>
body {
    margin: 0;
    height: 200vh;
}

.progress-bar {
    background: #ff4163;
    height: 10px;
    width: 0%;
    position: fixed;
    top: 0;
    z-index: 1;
}
window.addEventListener('scroll', handleScroll);

function handleScroll() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;  
    var scrolled = (winScroll / height) * 100;
  
    document.getElementById("progressBar").style.width = scrolled + "%";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.