JSFiddle - React, Tailwind, and code Playground

HTML

<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br />
<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br />
<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br />
<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br />

<progress id="progressbar" value="0" max="100"></progress>
<br />
<br />

<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem

<progress id="progressbar2" value="0" max="100"></progress>

<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />
<div id="horizontal">test</div>

CSS

progress {
    top:150px;
}
#progress2 {
    margin-top: 500px
    position: relative;
}

JavaScript

$(window).scroll(function () {
var c = $(window).height();
   var progressLowerLimit=1000-c; //assuming the first progressbar to 1000px away from top.
    if(progressLowerLimit<0)
        progressLowerLimit=0;
   var s = $(window).scrollTop(),
 d = $(document).height()-progressLowerLimit;
    
  if(s<progressLowerLimit)
    return;
  else
    s=s-progressLowerLimit;
    scrollPercent = (s / (d-c)) * 100;
    var position = scrollPercent;

 $("#progressbar").attr('value', position);
 $("#progressbar2").attr('value', position);
 });