Create a Scroll Indicator with Javascript

Create a Scroll Indicator with Javascript - This is one way to enhance your blog's appearance so that it seems more lively, which is to create a scroll indicator. A line that is usually stored above the blog will indicate the extent to which the discroll page.

This scroll indicator may be similar to the loading indicator that is equally stored on the blog and the percentage is indicated by a color that will increasingly shift to the right if the page continues to scroll down and shift to the left if the page scrolls up.

This scroll indicator uses javascript, only a few lines of javascript and does not require Jquery Library because this is pure javascript.

But my advice in using this scroll indicator is to consider whether it is really needed or not, so as not to add to the burden of loading the blog. Especially if the blog already uses a lot of scripts.

Alright, now let's make this scroll indicator.

Please save the following CSS in your blog style.

.progress-container {
  width: 100%;
  height: 3px;
  background: #00796B;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999
}

.progress-bar {
  height: 3px;
  background: #76FF03;
  width: 0%
}

Please adjust the marked background to match the blog theme or according to your taste.


.progress-container is where the scroll indicator is located, and .progress-bar is a scroll indicator that moves from left to right.
Then please save the following HTML and javascript code above the </body> code

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

<script>
//<![CDATA[
window.addEventListener("scroll", 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("progressbar").style.width = scrolled + "%";
}
//]]>
</script>

Good luck and hopefully useful.