JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="progBar"><span id="label"></span>
    </div>
</div>
<div class="pad">
    <input type="text" id="amount" />
</div>

CSS

#container {
    background-color: aqua;
    width: 100%;
    height: 20px;
}
#progBar {
    background-color: yellow;
    width: 1%;
    height: 20px;
}
.pad {
    margin-top: 20px;
}
#label {
    padding-left: 5px;
}

JavaScript

var progress = document.getElementById("progBar");
var amount = document.getElementById("amount");
var label = document.getElementById("label");

amount.oninput = function () {
    setTimeout(function () {
        progress.style.width = amount.value + "%";
        label.innerHTML = amount.value + "%";
    }, 500);
}