JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
  <h2>Dynamic Progress Bar</h2>

  <div class="w3-light-grey">
    <div id="myBar" class="w3-green" style="height:24px;width:0"></div>
  </div>
  <br>

  <button class="w3-button w3-green" onclick="move()">Click Me</button> 
</div>

CSS

body{
	height: 1000px;
}

JavaScript

var body = document.body,
    html = document.documentElement;

var height = body.scrollHeight - html.clientHeight;
var valor = 0;

window.onscroll = move;

function move() {
  var doc = document.documentElement;
  var tempScrollTop = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
  var elem = document.getElementById("myBar");
  valor = (tempScrollTop * 100) / height
  elem.style.width = valor + '%';
}