Javascript jQuery和Twitter引导进度条

我有以下代码：

<div class="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

我应该怎么做，当我点击网站上的某个按钮时，宽度将在特定时间内从0变为100，并产生加载进度条的效果

---

谢谢。

如前所述，jQuery animate将完成此任务。更改持续时间以适合所需的时间

$('.bar').animate({ width: "100%" },2000);

你可以试试这个（使用）

$（函数（）{
$（“#progressbar”）.progressbar（）；
$（“#进度”）。单击（函数（）{
var progressbar=$（“#progressbar”），
progressLabel=$（“.progressLabel”）；
progressLabel.show（）；
progressbar.progressbar({
值：false，
更改：函数（）{
progressLabel.text（progressbar.progressbar（“值”）+“%”）；
},
完成：函数（）{
progressLabel.text（“完成！”）；
}
});
功能进展（）{
var val=progressbar.progressbar（“值”）|| 0；
progressbar.progressbar（“值”，val+1）；
如果（val<99）{
设置超时（进度，50）；
}
}
设置超时（进度，10）；
});
});

$(function() {
    $( "#progressbar" ).progressbar();
    $('#progress').click(function(){
        var progressbar = $( "#progressbar" ),
        progressLabel = $( ".progress-label" );
        progressLabel.show();
        progressbar.progressbar({
            value: false,
            change: function() {
                progressLabel.text( progressbar.progressbar( "value" ) + "%" );
            },
            complete: function() {
                progressLabel.text( "Complete!" );
            }
        });

        function progress() {
            var val = progressbar.progressbar( "value" ) || 0;
            progressbar.progressbar( "value", val + 1 );
            if ( val < 99 ) {
                setTimeout( progress, 50 );
            }
        }
        setTimeout( progress, 10 );
    });
});