create custom window scroll indicator with CSS and JavaScript

See the Pen create custom window scroll indicator with CSS and JavaScript by satish mallick.

<div class="header">
  <h2>On Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="Bars"></div>
  </div>
</div>

<div class="content">
  <h3>Scroll Down and See The progress bar Effect</h3>

  <p>It also on scroll up and scroll down</b>.</p>
  <p>It is even <b>responsive</b>! Resize the browser window to see the effect.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa quam, bibendum commodo ultricies ac, lacinia at velit. Nulla id ante id lacus finibus luctus vel sed nisl. Donec lacinia porta eleifend. Vestibulum efficitur tortor quis augue consequat porttitor. Maecenas ut felis arcu. Morbi convallis auctor turpis, eu tristique justo pellentesque id. Etiam quis viverra dolor. Sed ut commodo elit, in vulputate nunc. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa quam, bibendum commodo ultricies ac, lacinia at velit. Nulla id ante id lacus finibus luctus vel sed nisl. Donec lacinia porta eleifend. Vestibulum efficitur tortor quis augue consequat porttitor. Maecenas ut felis arcu. Morbi convallis auctor turpis, eu tristique justo pellentesque id. Etiam quis viverra dolor. Sed ut commodo elit, in vulputate nunc. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa quam, bibendum commodo ultricies ac, lacinia at velit. Nulla id ante id lacus finibus luctus vel sed nisl. Donec lacinia porta eleifend. Vestibulum efficitur tortor quis augue consequat porttitor. Maecenas ut felis arcu. Morbi convallis auctor turpis, eu tristique justo pellentesque id. Etiam quis viverra dolor. Sed ut commodo elit, in vulputate nunc. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa quam, bibendum commodo ultricies ac, lacinia at velit. Nulla id ante id lacus finibus luctus vel sed nisl. Donec lacinia porta eleifend. Vestibulum efficitur tortor quis augue consequat porttitor. Maecenas ut felis arcu. Morbi convallis auctor turpis, eu tristique justo pellentesque id. Etiam quis viverra dolor. Sed ut commodo elit, in vulputate nunc. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa quam, bibendum commodo ultricies ac, lacinia at velit. Nulla id ante id lacus finibus luctus vel sed nisl. Donec lacinia porta eleifend. Vestibulum efficitur tortor quis augue consequat porttitor. Maecenas ut felis arcu. Morbi convallis auctor turpis, eu tristique justo pellentesque id. Etiam quis viverra dolor. Sed ut commodo elit, in vulputate nunc. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa quam, bibendum commodo ultricies ac, lacinia at velit. Nulla id ante id lacus finibus luctus vel sed nisl. Donec lacinia porta eleifend. Vestibulum efficitur tortor quis augue consequat porttitor. Maecenas ut felis arcu. Morbi convallis auctor turpis, eu tristique justo pellentesque id. Etiam quis viverra dolor. Sed ut commodo elit, in vulputate nunc. </p>

</div>

<style>
body {
  margin: 0;
  font-size: 28px;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.header h2 {
  text-align: center;
}

.progress-container {
  width: 100%;
  height: 3px;
  background: #ccc;
}

.progress-bar {
  height: 3px;
  background: red;
  width: 0%;
}

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}
</style>

<script>
window.onscroll = function() {onscrollbar()};

function onscrollbar() {

  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("Bars").style.width = scrolled + "%";
}
</script>