解决方案 »

  1.   

    jquery 进度条
      

  2.   

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Progressbar - Custom Label</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
    .ui-progressbar {
    position: relative;
    }
    .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    }
    </style>
    <script>
    $(function() {
    var progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" ); 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, 100 );
    }
    } setTimeout( progress, 3000 );
    });
    </script>
    </head>
    <body><div id="progressbar"><div class="progress-label">Loading...</div></div>
    </body>
    </html>
     
      

  3.   

    看 api
    $(function() {
            var progressbar = $( "#progressbar" ),
                progressLabel = $( ".progress-label" );
     
            progressbar.progressbar({
                value: false,
                change: function() {
                    //从1 到100 %
             progressLabel.text( progressbar.progressbar( "value" ) + "%" );
                },
                //完成后
                complete: function() {
                    progressLabel.text( "Complete!" );
                }
            });
     
            function progress() {
                //获取 进度条的值
             var val = progressbar.progressbar( "value" ) || 0;
                // 进度条加1
                progressbar.progressbar( "value", val + 1 );
     
                if ( val < 99 ) {
                   //再递归调用
                 setTimeout( progress, 100 );
                }
            }
            //setTimeout 函数执行
            setTimeout( progress, 3000 );
        });
      

  4.   

    楼主可以上网找一下jquery进度条,的确dwz等待状态就只有一个圈圈在转。