JSFiddle - React, Tailwind, and code Playground

HTML

<div class="process">
    <div class="bar" id="bar"></div>
    <div class="text" id="text">0%</div>
</div>

CSS

.process {
    border: #999 solid 1px;
    background: #fff;
    position: relative;
    width: 200px;
}
.process .bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #ccc;
}
.process .text {
    position: relative;
    line-height: 1.5em;
    vertical-align: middle;
    text-align: center;
}

JavaScript

(function(){
    var bar = document.getElementById('bar'),
        text = document.getElementById('text'),
        p = 0,
        t;
    t = setInterval(function(){
        p += 1;
        text.innerHTML = bar.style.width = p + '%';
        if (p >= 100)
            clearInterval(t);
    }, 500);
})();