JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

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

CSS

* {
    padding:0;
    margin:0;
}
body {
    font-family:Calibri;
    font-size:62.5%;
}
.per {
    position:absolute;
    width:350px;
    font-size:120%;
    left:50%;
    top:30%;
    border:1px solid silver;
    margin-left:-156px;
    height:30px;
    line-height:30px;
    text-align:center;
}

JavaScript

var i = 1;
countD(i);

function countD(i) {
    $('.per').animate({
        padding: 0
    },50,function () {
        $('.num').html("Please wait, content loaded by " + i + "%");
        if (i === 100) {
            $('.num').html("Loaded");
        } else {
            i++;
            countD(i);
        }


    });

}