Trying to implement a sliding progressbar without using gif

[drask182]

I am trying to implement a sliding progrees bar. I want the progress to gradually increase.I try:HTML\[code\]<div id="progressKeeper"><div id="progress"></div></div>\[/code\]CSS\[code\]#progressKeeper { width: 800px; height: 25px; border: 3px double #003366; margin: 0px 10px; padding: 3px;}\[/code\]JavaScript\[code\]var el = $('#progress');var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100;for (var i = 0; i < 100; i++) { el.width(el.width() + steppedIncreaseAmount+ 'px');}\[/code\]See this jsfiddleBut it just increases suddenly. I want a smooth effect, like a fade.