[devote]

<style type="text/css">
.progress_bar {
    position: relative;
    width: 100px;
    height: 20px;
    border: 1px solid #000;
}
#percent {
    position: absolute;
    left: 0;
    top: 0;
    color: red;
}
#progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 20px;
    background-color: #00f;
}
</style>
<div class="progress_bar">
    <div id="progress"></div>
    <div id="percent">0%</div>
</div>
<button onclick="start();">Start</button>
<script type="text/javascript">
    function start( at ) {
        at = ++at || 0;
        var progress = document.getElementById('progress');
        var percent = document.getElementById('percent');
        progress.style.width = at + "px";
        percent.innerHTML = at + "%";
        if ( at < 100 ) {
            setTimeout( function() {
                start( at );
            }, 100 );
        }
    }
</script>