JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progressBar">
    <div class="progressBarValue">
</div>
<a href="#no" id="#increase">Add more</a>

CSS

.progressBar {
    width: 400px;
    height: 20px;
    background-color: #cccccc;
    border-radius: 5px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.progressBarValue {
    position: relative;
    left: 0px;
    width: 8px;
    height: 20px;
    background-color: red;
    -moz-border-radius: 5px 0px 0px 5px;
}

JavaScript

function setProgress(target,value) {
    // Get the radius of the parent element
    var borderRadius = parseInt($(target).css('-moz-border-radius-topleft'));
    // Get the width of the parent element
    var parentWidth = $(target).parent().width();
    // Get the calculated width of the actual element, given the percent value for the progress
    var pixelWidth = parseInt(parentWidth) * (parseInt(value) * .01);
    
    //console.log("Current width: " + pixelWidth);
    //console.log("Border radius: " + borderRadius);
    //console.log("Remaining:" + (parseInt(parentWidth) - pixelWidth));
    
    // If the bar is full, don't fill any more
    if (pixelWidth > parentWidth) {
        return;
        
    }
    
    // If the value is within the range of the border-radius, apply a border radius
    if ((parseInt(parentWidth) - pixelWidth) < parseInt(borderRadius)) {        
        $(target).css({'-moz-border-radius': borderRadius + 'px', 'width': pixelWidth}).data('percentWidth', value);
    }
    
    // If the value isn't, don't apply it
    else {
        $(target).css('width', pixelWidth + 'px').data('percentWidth', value);
    }
}
$(document).ready(function() {
    // Click on the progress bar to increase the size
    $(".progressBarValue").live("click", function () {
        var currentWidth = $(".progressBarValue").data('percentWidth');
        setProgress($(".progressBarValue"), 2 + currentWidth);
    });
});