JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="loadingContainer">
            <div class="greyContainer">
                <img class="eggGrey" src="img/egg-grey.png">
                <p id="bluePercent">50%</p>
            </div>

            <div height="50%" class="blueContainer">
                <img class="eggBlue" src="img/egg-blue.png">
                <p class="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;
    background-color:#37bdee;
}
.eggBlue{
    position:relative;
    height:175px;
}
.greyPercent{
    position:relative;
    top:-110px;
    left:25%;
    display:block;
    font-family:'Lato';
    color:#363636;
    font-size:20px;
}
.greyContainer{
    background-color:#363636;
}
.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

$('.blueContainer').bind('heightChange', function(){
        $('#bluePercent').html(''+$('.blueContainer').css('height')/16.0*100); //Converting height into percentage and adding it to the p tag
    });