JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progressbarr">
    <div><span class="percentage"></span>
    </div>
</div>
<br>
<br>
<button id='test'>test</button>

CSS

#progressbarr {

    float: left;

    width: 300px;

    height: 25px;

    background: #DDD;

    border-radius: 4px;

    box-shadow: inset 0px 1px 3px #aaa;

    margin: 12px 0 0 1px;

}

#progressbarr > div {

    background-color: green;

    width: 0%;

    height: 25px;

    border-bottom-left-radius: 4px;

    border-top-left-radius: 4px;

}

span.profilename {

    font-size: 16px;

}

.percentage {

    float: right;

    color: white;

    margin: 5px 5px 0 0;

    font-size: 12px;

}

JavaScript

$('#test').on('click', function (e) {
    $progress_bar = $('#progressbarr');

    //convert to percent
    var progressbar_width;


    progressbar_width = Math.floor(100 * ($progress_bar.find('div').width()) / $progress_bar.width());

    var i = progressbar_width + 10; // change in percent

    if (i < 101) {


        $progress_bar.find('div').css('width', (i + '%'));

        $progress_bar.find('span').text(i + '%');


    } else {
        $progress_bar.find('div').css('border-top-right-radius', '4px');
        $progress_bar.find('div').css('border-bottom-right-radius', '4px');

    }

    // if
});