JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="loadingContainer">
            <div class="greyContainer">
                <img class="eggGrey" src="http://i.imgur.com/J005yNZ.png">
                <p id="bluePercent">50%</p>
            </div>

            <div height="50%" class="blueContainer">
                <img class="eggBlue" src="http://i.imgur.com/9DXoUO4.png">
                <p id="greyPercent">50%</p>
            </div>
        </div>
    </body>
</html>

CSS

.loadingContainer{
    margin:0 auto;   
    border-radius:5px 5px 5px 5px;
    width:200px;
    height:200px;
}
.blueContainer{
    position:relative;
    top:-225px;
    overflow:hidden;
    height:50%;
    max-height:175px;
    width:200px;
    left:29px;
}
.eggBlue{
    position:relative;
    height:175px;
}
#greyPercent{
    position:relative;
    top:-110px;
    left:25%;
    display:block;
    font-family:'Lato';
    color:#363636;
    font-size:20px;
}
.greyContainer{
}
.eggGrey{
    position:relative;
    top:15px;
    height:170px;
    left:31px;
}
#bluePercent{
    position:relative;
    top:-92px;
    left:79px;
    display:block;
    font-family:'Lato';
    color:#37bdee;
    font-size:20px;
}

JavaScript

function setProgress(percentage)
{
    $('.blueContainer').css('height', percentage + '%');
    $('#bluePercent, #greyPercent').text(percentage + '%');
}

setProgress(0);

// Simulate box size changing
var step = 0;
var timer = setInterval(function(){
    setProgress(step * 10);
    if(step == 10) clearInterval(timer);
    else ++step;
}, 500);