Question

我有这段代码：

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

我应该怎么做，所以当我点击网站某处的按钮时，宽度将在特定时间内从0变为100，并提供加载进度条的效果？

感谢。

Answer 1

如上所述，jQuery动画将会这样做。更改持续时间以适应您想要的时间

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

Answer 2

您可以尝试此操作（使用jQuery ui）

$(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 );
    });
});

DEMO.

jQuery和Twitter Bootstrap进度条

2 个答案: