JSFiddle - React, Tailwind, and code Playground
HTML
<div class="bar-long"></div>
CSS
.bar-long {
height: 5px;
background-color: #009ACF;
width: 0px;
z-index: 1000;
position: fixed;
top: 50px;
left: 0;
}
body {
height:3000px;
}
JavaScript
$(window).scroll(function() {
// calculate the percentage the user has scrolled down the page
var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
$('.bar-long').css('width', scrollPercent +"%" );
});