[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; 
}
#loaded {
    display: none;
}
</style> 
<div class="progress_bar"> 
    <div id="progress"></div> 
    <div id="percent">0%</div> 
</div> 
<div id="loaded">Loaded</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 ); 
        } else {
            document.getElementById('loaded').style.display = 'block';
        }
    } 
</script>