Scroll based loading bar

Question

Hello!

I wonder, if anyone has ever done or seen on any site, a horizontal bar at the top of the site, example the youtube loading bar, but it increases and reaches 100% when it is rolled to the bottom of the page, as it scrolls down, it increases and, If you scroll up it will decrease. This with Javascript.

Answer 1

Here’s an example made with pure JS. I think it’s exactly what you need. And it’s pretty easy to customize etc.

window.onscroll = function() {myFunction()};

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

body { margin: 0; }

#progress-container {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
}

#progress-bar-container {
  width: 100%;
  height: 8px
}

#progress-bar {
  height: 8px;
  background-image: -webkit-linear-gradient(90deg, #a258ff, #43b6bd);
  background-image: linear-gradient(90deg, #a258ff, #43b6bd);
  width: 0%;
}

.content {
  height: 10000px;
}

<div id="progress-container">
    <div id="progress-bar-container">
        <div id="progress-bar"></div>
    </div> 
</div>

<div class="content"></div>

Source: https://codepen.io/randydaniel/pen/KoKqvg