<div class="content"><h1>Scroll Down</h1>
<div class="scroll-indicator">
  <div id="scroll-bar" class="scroll-bar"></div>
  </div>
    </div>
  <div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas quis lorem vitae placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut et commodo ex, non porttitor dui. Vestibulum quis sem tincidunt, lobortis lectus id, fermentum elit. Cras ut justo pulvinar, iaculis massa nec, consectetur magna. Integer in posuere neque, in efficitur nunc. Etiam porta rutrum dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Suspendisse placerat at ipsum a finibus. Quisque in facilisis risus. In quis justo et lectus tincidunt auctor. Nunc metus justo, iaculis eu ultricies at, eleifend id dolor. Proin et commodo augue. Aliquam euismod ac augue eu dapibus. Quisque suscipit urna nunc, id ultrices justo volutpat at. Vivamus bibendum lacus vitae est egestas fermentum. Cras viverra, magna eget fermentum rhoncus, nisl velit pharetra est, at elementum lorem velit at odio. Fusce ac pharetra turpis. Fusce hendrerit vulputate nunc, non auctor leo auctor at. Fusce cursus posuere diam sed hendrerit. Nullam dignissim tellus ut tristique mollis.

Vivamus non urna lectus. Quisque fermentum, nisi convallis vulputate malesuada, turpis leo ultrices enim, vel gravida purus enim a lorem. Sed nec tellus neque. Nullam risus sem, semper eu ullamcorper nec, tincidunt at arcu. Integer leo velit, maximus ac lectus sed, porta suscipit felis. Aliquam elementum in mauris vel iaculis. Cras auctor commodo nulla, at imperdiet orci sollicitudin quis. Vivamus semper sem et arcu mattis, at congue augue tempor.

In nec arcu in libero rutrum pellentesque nec vel ipsum. Duis scelerisque ex nulla, vel dignissim turpis tristique eget. Nullam vitae malesuada velit. Vivamus pellentesque posuere posuere. Quisque gravida sit amet quam id viverra. Fusce nec placerat purus. Suspendisse enim elit, rutrum eu rhoncus vitae, dictum et enim. Morbi et venenatis diam. Donec eget diam in neque dictum sodales. Aenean pharetra dictum tristique. Ut at ultrices odio, consectetur tempor purus. Nullam laoreet quis odio quis tincidunt. Phasellus nec augue eu ante placerat molestie vel a lacus. Nulla accumsan tempus libero id mollis. Etiam a elit non enim posuere tempus ac consectetur nunc. Proin sollicitudin facilisis mi.
    
In nec arcu in libero rutrum pellentesque nec vel ipsum. Duis scelerisque ex nulla, vel dignissim turpis tristique eget. Nullam vitae malesuada velit. Vivamus pellentesque posuere posuere. Quisque gravida sit amet quam id viverra. Fusce nec placerat purus. Suspendisse enim elit, rutrum eu rhoncus vitae, dictum et enim. Morbi et venenatis diam. Donec eget diam in neque dictum sodales. Aenean pharetra dictum tristique. Ut at ultrices odio, consectetur tempor purus. Nullam laoreet quis odio quis tincidunt. Phasellus nec augue eu ante placerat molestie vel a lacus. Nulla accumsan tempus libero id mollis. Etiam a elit non enim posuere tempus ac consectetur nunc. Proin sollicitudin facilisis mi.

Nullam molestie, purus quis cursus cursus, magna turpis finibus eros, a ultrices turpis velit in leo. Maecenas auctor lacinia nisi, ac rhoncus velit finibus ac. Quisque ac velit efficitur nunc facilisis dignissim ac a ipsum. Vestibulum porttitor eu odio eu vehicula. Suspendisse ac fringilla ligula. In tincidunt sem eget elit vehicula, ac ullamcorper odio consectetur. Suspendisse quis nulla sed dui tincidunt viverra. Mauris accumsan sagittis sapien. Suspendisse urna purus, fringilla eu purus eget, pellentesque elementum velit. Praesent nec pretium arcu.Nullam molestie, purus quis cursus cursus, magna turpis finibus eros, a ultrices turpis velit in leo. Maecenas auctor lacinia nisi, ac rhoncus velit finibus ac. Quisque ac velit efficitur nunc facilisis dignissim ac a ipsum. Vestibulum porttitor eu odio eu vehicula. Suspendisse ac fringilla ligula. In tincidunt sem eget elit vehicula, ac ullamcorper odio consectetur. Suspendisse quis nulla sed dui tincidunt viverra. Mauris accumsan sagittis sapien. Suspendisse urna purus, fringilla eu purus eget, pellentesque elementum velit. Praesent nec pretium arcu.
  </div>

.content {
  position: fixed;
  top: 0;
  z-index: 1;
  width:100%;
  text-align: center;
  background-color: #264653;
  color: white;
}

.scroll-indicator {
  width: 100%;
  height: 10px;
  background-color: #2a9d8f;
}

.scroll-bar {
  height: 10px;
  background-color: #e9c46a;
  width: 0%;
}

.text {
  width:50%;
  font-size: 25px;
  position: relative;
  left:26%;
  padding:110px 0;
}

window.addEventListener('scroll',()=> scrollBar())

function scrollBar() {
  var scrollDown = document.body.scrollTop || document.documentElement.scrollTop;
  var h = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scroll = (scrollDown / h) * 100;
  document.getElementById("scroll-bar").style.width = scroll + "%";
}