Progress bar example

http://stackoverflow.com/questions/20793506/html-progress-bar-click-and-update/20793925#20793925

HTML

<div class='clickable'>
    <div class='display'>
        <div class="progress"></div>
    </div>
</div>

CSS

.clickable {
    border: 1px solid #333;
    background: #eee;
    height: 40px;
    width: 200px;
    margin: 15px;
    position: relative;
}
.display {
    height: 16px;
    position: absolute;
    width: 100%;
}
.progress {
    position:absolute;
    left:0;
    top:0;
    background:green;
    height:40px;
    width:10px;
}

JavaScript

$('.clickable').bind('click', function (ev) {
    var $div = $(ev.target);
    var $display = $div.find('.display');

    var offset = $div.offset();
    var x = ev.clientX - offset.left;

    $('.progress').width(x);
});