JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div id="pbc">
    <div id="pb"></div>
    <div id="pbt"></div>
</div>

CSS

#pbc {
    width:300px;
    height:16px;
    background:#000;
    border:#000 1px solid;
}
#pbc > #pb {
    position: relative;
    top:0px;
    background: #06C;
    width:0%;
    height:16px;
    color: #0FF;
    text-align:center;
}
#pbc > #pbt {
    position: relative;
    top:-19px;
    text-align:center;
    color:#FFF;
    padding: 4px;
    height:8px;
    font-size:12px;
}

JavaScript

var testvalue = 1;
var pbt = document.getElementById("pbt");
var pb = document.getElementById("pb");

var increase = function (testvalue) {
    if (testvalue > 100) return;
    pb.style.width = testvalue + "%";
    pbt.innerHTML = testvalue + "%";
    window.setTimeout(function () {
        increase(++testvalue)
    }, parseInt(Math.random()*100));
}
increase(testvalue)