JSFiddle - React, Tailwind, and code Playground

by mendelthecoder

HTML

<div id="back"><span id="text">loading...</span></div>
<div id="a"></div>

CSS

#a {
    width:1px;
    background-color:red;
    z-index:1;
}

#back {
    width:100px;
    background-color:#bbbbbb;
}

#text {
    position: absolute;
    z-index:2;
    width:100%;
    height:30px;
    line-height:30px;
    text-align:center;
}

div{
    height:30px;
    position: absolute;
}

JavaScript

var counter = 0;
var intervalid;

function addDIV()
{
    counter>100?
        counter = 0:
        document.getElementById('a').style.width = ++counter + 'px';
    
    setTimeout( addDIV, 50 - ( counter / 4 ) );
}

setTimeout( addDIV, 50 );