JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="count">
    <div class="per"></div>
    <div class="num"></div>
</div>

CSS

body {
    font-size:62.5%;
    font-family:Calibri;
}

.count {
    color:#999;
    font-size:120%;
    width:300px;
    height:30px;
    line-height:30px;
    position:relative;
    text-align:center;
    border:2px solid #dfdfdf;
}
.num {
    width:0;
    height:100%;
    position:relative;
    background:#f4f4f4;
}
.per {
    height:100%;
    z-index:1000;
    width:100%;
    position:absolute;
}
b {color:red;}

JavaScript

var i = 1;
var divPer = $('div.per');
var divNum =  $('div.num');

perCent(i);
function perCent(i) {
    divNum.animate({
        width: i + "%"
    },10,function () {
        divPer.html("styles loading <b>" + i + "</b> %");
        if (i === 100) {
           divPer.html("loaded <b>"+ i + '</b> % thank you!!!');
        } else {
            i++;
            perCent(i);
        }

    });
}
console.log(perCent);