JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress">
    <label class="smallest">0h</label>
    <div id="progressbar">
        <span id="reachedh"></span>
        <span id="availableh"></span>
         <div id="availablehBubble">
        
        </div>
    </div>
   
    <label class="total">500h</label>
</div>

CSS

*{
    font-family:'Helvetica';
}
.progress{
    width:100%;
    position:relative;
    padding:0px 40px 0px 25px;
    box-sizing:border-box;
    margin:50px 0px;
}
label{
    color:#aaa;
    font-size:12px;
    margin-top:-2px;
}
label.total{
    right:0px;
    top:0px;
    position:absolute;
}
label.smallest{
    right:0px;
    left:0px;
    position:absolute;
    
}
#progressbar{
    width:100%;
    height:10px;
    position:relative;
    background:#F4F5F6;
    border-radius:10px;
}
#reachedh{
    width:0px;
    height:10px;
    position:absolute;
    background:#BCBDC0;
    left:0px;
    top:0px;
    z-index:20;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    transition: all 1s ease-in-out;
}
#availableh{
    width:0px;
    height:10px;
    position:absolute;
    background:#DDDFE4;
    left:0px;
    top:0px;
    z-index:10;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    transition: all 1s ease-in-out;
}

#availablehBubble{
    text-align:center;
    left:50%;
    position:absolute;
    height:40px;
    width:40px;
    top:0px;
    border-radius:100%;
    background:#fff;
    border:2px solid #DDDFE4;
    padding:12px 0px;
    box-sizing:border-box;
    z-index:30;
    margin:-18px;
    font-size:10px;
    color:#aaa;
    transform:scale(0);
}

#availablehBubble.show{
    transform:scale(1);
    transition: transform 0.5s ease-in-out;
}

JavaScript

// available h = 400;
// reached h = 233;

var reachedh = 233,
    totalh = 500,
    availableh = 400,
    reachedhPercent = (reachedh / totalh)*100,
    availablehPercent = (availableh / totalh)*100;



$('#reachedh').css({'width':reachedhPercent+'%'});
$('#availableh').css({'width':availablehPercent+'%'});
$('#availablehBubble').css({'left':availablehPercent+'%'});
$('#availablehBubble').text(availableh+'h');
$('#availablehBubble').addClass('show');