JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div class="progress">
    <div class="bar"></div >
    <div class="percent">50%</div >
</div>

<button id="set30" class="changeprogress">30%</button>
<button id="set70" class="changeprogress">70%</button>
<button id="set100" class="changeprogress">100%</button>

CSS

.progress{
        position:relative;
        width:500px;
        border:1px solid #333;
        position:relative;
        padding:3px;
    }
    .bar{
        background-color:#00ff00;
        width:50%;
        height:20px;
        transition:width 150ms;
    }
    .percent{
        position:absolute;
        display:inline-block;
        top:3px;
        left:50%;
        transform:translateX(-50%);
    }

JavaScript

$('.changeprogress').click(function(){
    var percent = $(this).text()
    $('.bar').css('width', percent );
    $('.percent').text( percent );
});