Edit in JSFiddle

function progressBar(percent, $element) {
	var progressBarWidth = percent * $element.width() / 100;
	$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
}

$(document).on('click', '#thirty', function() {
progressBar(30, $('#progressBar'));
});

$(document).on('click', '#seventy', function() {
progressBar(70, $('#progressBar'));
});
<div id="progressBar"><div></div></div>

<input type="button" id="thirty" value="30%"><br>
    <input type="button" id="seventy" value="70%">
#progressBar {
    width: 400px;
    height: 22px;
    border: 1px solid #111;
    background-color: #292929;
}
#progressBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #0099ff;
    background-image: url(https://raw.githubusercontent.com/kopipejst/progressbar/master/skins/jquery-ui-like/pbar-ani.gif);
	border-right: 1px solid #AAA;
}