Progress bar example

by Luiz Silva

HTML

<div id="bar"><div id="progress"></div></div>
<button id="start">Start</button> 
<div id="porcentagem">0%</div>

CSS

#bar {
    height: 10px;
    width: 100px;
    background-color: #eef;
    border: 1px solid #448;
}
#progress {
    height: 10px;
    width: 0px;
    background-color: #aae;
}

JavaScript

var i;
var intervalo;
$('#start').click(function() {
    progredir(135, 5);
});

function progredir(total, passo) {
    i = 0;
    $('#porcentagem').text('0%');
    intervalo = setInterval(function() {
        i += passo;
        if (i >= total) {
            i = total;
            clearInterval(intervalo);
        }
        var porcentagem = i / total * 100;
        $('#progress').css('width', parseInt(porcentagem) + 'px')
        $('#porcentagem').text('' + parseInt(porcentagem) + '%');
    }, 50);
}