Scroll-based loading bar

Question

Scroll-based loading bar

Navigation

#1 by (1 votes)

2

Hello

I'd like to know, if someone has already done or seen on some site, a horizontal bar at the top of the site, example the youtube upload bar, however it increases and reaches 100% when it is rolled to the bottom of the page , as the scroll scrolls down, it scrolls up, and scrolling the scroll up will decrease. This with Javascript.

javascript html jquery css

asked by anonymous 20.04.2018 / 17:28

1 answer

Using data from one select within another? Padding reducing image

score 1 · Accepted Answer

Here's an example made with pure JS. I think that'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: link