Question

I am trying to implement a sliding progrees bar. I want the progress to gradually increase.

I try:

HTML

<div id="progressKeeper">
<div id="progress"></div>
</div>

CSS

#progressKeeper {
    width: 800px;
    height: 25px;
    border: 3px double #003366;
    margin: 0px 10px;
    padding: 3px;
}

JavaScript

var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100;
for (var i = 0; i < 100; i++) {
    el.width(el.width() + steppedIncreaseAmount+ 'px');
}

See this jsfiddle

But it just increases suddenly. I want a smooth effect, like a fade.

Answer 1

You need to set some kind of delay between the update of these values. However, because it appears that you’re using jQuery, you can easily do something like this:

$(document).ready(function() {
    var el = $('#progress');
    el.animate({
        width: "100%"
    }, 1800);
});​

http://jsfiddle.net/VbVBP/2/

Another way, if you really want to keep the setup you’ve got going now, would be do just add a setTimeout counter to your for loop like this:

var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100; 
for (var i = 0; i < 100; i++) {
    setTimeout(function(){
        el.width(el.width() + steppedIncreaseAmount+ 'px');
    }, 1+i*20);
}​

http://jsfiddle.net/VbVBP/3/