2

我有这个代码:

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

我该怎么办,所以当我点击网站某处的按钮时,宽度会在特定时间从 0 变为 100,并给出加载进度条的效果?

谢谢。

4

2 回答 2

8

如前所述,jQuery animate 会做到这一点。更改持续时间以适合您想要的时间

$('.bar').animate({ width: "100%" },2000);
于 2013-06-25T01:45:01.860 回答
1

你可以试试这个(使用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 );
    });
});

演示

于 2013-06-25T01:46:19.977 回答