JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
  <div class="progress">
    <div class="bar" id="progressBar"></div>
  </div>  
</div>

<div class="content">
  <div class="page"><b>Page 1</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 2</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 3</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 4</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 5</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 6</b><br>Bladieblabie blablabla blabladie bla</div>
</div>

CSS

html,body {width:100%; height:100%; margin:0;}

body {
  font-size: 28px;
  font-family: Helvetica, sans-serif;
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: hidden;
}

div {box-sizing:border-box;}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
}
.header .progress {
  width: 100%;
  height: 100%;
  background: #ccc;
}
.header .progress .bar {
  width: 0%;
  height: 100%;
  background: #4caf50;
}

.content {
  width: 100%;
  height: calc(100% - 8px);
  margin-top: 8px;
  padding: 10px 0;
  white-space: nowrap;
}
.content .page {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: solid 5px #c77;
  background: #ddd;
  text-align: center;
  white-space: normal;
}

JavaScript

window.onscroll = function() {
  var scroll = document.body.scrollLeft || document.documentElement.scrollLeft;
  var total = document.documentElement.scrollWidth - document.documentElement.clientWidth;
  document.getElementById("progressBar").style.width = ((scroll/total)*100) + "%";
};