6.4. Scroll Indicator

<html>

<head>
  <style>
    .indibar {
      position: fixed;
      z-index: 99;
      top: 0px;
      height: 4px;
      background: #0cc261;
      width: 0%;
    }
  </style>



</head>

<body>
  <div class="indibar" id="indibar"></div>

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

    function scrollindi() {
      var scrolling = document.body.scrollTop || document.documentElement.scrollTop;
      var pagescrollheight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var lefttoscroll = (scrolling / pagescrollheight) * 100;
      document.getElementById("indibar").style.width = lefttoscroll + "%";
    }
  </script>
</body>

</html>