JSFiddle - React, Tailwind, and code Playground

by CrazySpiderYT

HTML

<div id='pbar' data-binary='52'>

  <div id='val'>
  <span class='pbar-text'></span>
  </div>
</div>

CSS

div#val {
  background-color: green;
  border-radius:10px;
  width: 0px;
}
div#pbar {
  background-color: gray;
  border-radius:20px;
  border: 3px solid black;
  width: 100px;
}
span.pbar-text{
  z-index:10;
  margin: 0 auto;
  text-align: center;
  text-color: black;
}

JavaScript

var val = document.getElementById('pbar').getAttribute('data-binary');
var eval = document.getElementById('val');
//setInterval(fuction(){for(i=0;i<val;i++){eval.style.width = i + '%';}},1);
var t =document.getElementsByClassName('pbar-text')[0];
t.innerHTML="&nbsp"

var i=0;
function go(){
	if(i != val){
  i++;
  var n0=parseInt(eval.style.width)+1;
  var n1=n0.toString();
  eval.style.width = n1+'px';
 // t.innerHTML=i+'%';
  }else{
 // t.innerHTML = 'Загрузка завершена';
        }
    }
setInterval(go, 50);