Javascript 简单jqueryprogressbar

假设：有一些CableModem，一个人想从MySQL数据库中列出他们的数据。（ip地址、mac地址、调制解调器类型等）

下面是HTML和PHP代码：（$limit值：15或25或50，用户可以选择）

您可以使用任何加载图像。在此处创建您自己的加载图像：

然后修改您的代码：

<div class="loader" style="display:none;">
    <img src="loader.gif" alt="" />
</div>

<script type="text/javascript">
  $(function() {
    $(".modem_row").each(function(){
      var modem_id = $(this).attr("id");
      $(".loader").show();
      $.ajax({
        url: "/modules/get_modem_state.php?modem_id="+modem_id,
        success: function(data) {
          if (data == 'online') {
            $(".loader").hide();
            $('#'+modem_id).animate({color: 'black'});
          }
        },
        error: function(){
            $(".loader").hide();
        }
      });
    });
  });
</script>

一个简单的例子：

    .progress-bar{height:20px; width:400px;}
    .status{height:20px; background:green; width:0px; text-align:center;}
    #btn{paddding:10px; width:100px; background:red;cursor:hand;cursor:pointer;}

    <div>
        <div  id="btn" onclick="Call()">click here</div>
    </div>

    <div class="progress-bar">
       <div class="status"></div>
    </div>

    <table>
        <tbody>
        <tr id="row1" class="modem_row"><td> - </td></tr>
        <tr id="row2" class="modem_row"><td> - </td></tr>
        <tr id="row3" class="modem_row"><td> - </td></tr>
        <tr id="row4" class="modem_row"><td> - </td></tr>      
        <tr id="row5" class="modem_row"><td> - </td></tr>  
        </tbody>
    </table>

}

测试一下

为进度条定义一个宽度，脚本将检测它并计算必须增加多少。
感谢AIAPEC，这是最后一个工作简单的进度条：
（修改后的js/html代码..）


.进度条{高度：10px；宽度：200px}
.状态{高度：10px；背景：银色；宽度：0px}
$（函数（）{
var nRows=$（“.modem_行”）.长度；
如果（nRows>0）{
变量宽度=$（“.progress bar”）.width（）；
var单位=宽度/nRows；
var$statusDiv=$（“.progress bar”）.children（“.status”）.eq（0）；
var-oldWidth=0；
var newWidth=0；
var i=0；
$（“.modem_行”）。每个（函数（）{
var modem_id=$（this.attr（“id”）；
$.ajax({
url:“/modules/get_modem_state.php？modem_id=“+modem_id，
成功：功能（数据）{
oldWidth=$statusDiv.width（）；
新宽度=旧宽度+单位；
$statusDiv.width（newWidth）；
如果（++i==nRows）{
$（'.status'）.fadeOut（）；
}
如果（数据==‘在线’）{
$（'#'+modem_id）.animate（{color:'black'}）；
}
}
});
});
}
});

我希望它能帮助其他人。
中部各州的进步不容易实现。您将如何计算完成百分比？前端将需要轮询具有分母的内容，以便准确得出进度百分比。Ajax调用在开始时为0%，在返回时为100%。我不想使用图像，而是一个简单的HTML彩色div。好的，可以使用任何你想要的。其思想是在调用AJAX调用之前显示div，并在“onsuccess”和“onerror”时隐藏它。@szpal我编辑了代码，并使用jQuery UI进度条添加了一个解决方案。请记住，您需要包括jQueryUI库。这里是链接：是的，这种方法真的很有效，我将发布最终代码。。谢谢
<div class="loader" style="display:none;">
    <img src="loader.gif" alt="" />
</div>

<script type="text/javascript">
  $(function() {
    $(".modem_row").each(function(){
      var modem_id = $(this).attr("id");
      $(".loader").show();
      $.ajax({
        url: "/modules/get_modem_state.php?modem_id="+modem_id,
        success: function(data) {
          if (data == 'online') {
            $(".loader").hide();
            $('#'+modem_id).animate({color: 'black'});
          }
        },
        error: function(){
            $(".loader").hide();
        }
      });
    });
  });
</script>

    <div class="loader" style="display:none;">
    <div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>

<script type="text/javascript">
$(function() {
    var progress_duration = 2000;
    var total_number_of_items = 15;

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

    function calculateProgress(){
        var val = $("#progressbar").progressbar("value") || 0;
        var step = Math.round(100 / total_number_of_items);
        var new_val = val + step;
        if(new_val > 100) new_val = 100;
        $("#progressbar").progressbar("value", new_val);
        if(val < 99){
            setTimeout(calculateProgress, 80);
        }
    }

    function animateProgressBar(){
        setTimeout(calculateProgress, progress_duration);
    }

    $(".modem_row").each(function(){
        var modem_id = $(this).attr("id");
        $(".loader").show();
        $.ajax({
            url: "/modules/get_modem_state.php?modem_id="+modem_id,
            success: function(data) {
                if(data == 'online'){
                    animateProgressBar();
                    $('#'+modem_id).animate({color: 'black'});
                }
            },
            error: function(){

            }
        });
    });
});
</script>

.ui-progressbar {
    position: relative;
}
.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

    .progress-bar{height:20px; width:400px;}
    .status{height:20px; background:green; width:0px; text-align:center;}
    #btn{paddding:10px; width:100px; background:red;cursor:hand;cursor:pointer;}

    <div>
        <div  id="btn" onclick="Call()">click here</div>
    </div>

    <div class="progress-bar">
       <div class="status"></div>
    </div>

    <table>
        <tbody>
        <tr id="row1" class="modem_row"><td> - </td></tr>
        <tr id="row2" class="modem_row"><td> - </td></tr>
        <tr id="row3" class="modem_row"><td> - </td></tr>
        <tr id="row4" class="modem_row"><td> - </td></tr>      
        <tr id="row5" class="modem_row"><td> - </td></tr>  
        </tbody>
    </table>

    function Call(){

    var nRows = $(".modem_row").length;
    if(nRows > 0){
    var width = $(".progress-bar").width();
    var unit = width/nRows;
    var unitPercent = 100/nRows;

    var $statusDiv = $(".progress-bar").children('.status').eq(0);
    var oldWidth = 0;
    var newWidth = 0;
    var percent = 0;

    var msTimer =0;
    var count = 1;   

    $(".modem_row").each(function(){
        msTimer += 800;//miliseconds
        setTimeout(function(){ //this code should be in ajax's success function:
                oldWidth = $statusDiv.width(); 
                newWidth = oldWidth + unit;
                percent = unitPercent*count;
                //here you can use animate() with jqueryUI.
                $statusDiv.width(newWidth).text(percent + " %");                    
                count++;
        }, msTimer);

    });//each

}//if

<style>
  .progress-bar { height:10px; width:200px }
  .status { height:10px; background:silver; width:0px }
</style>

<div class="progress-bar">
  <div class="status"></div>
</div>

<script type="text/javascript">
  $(function() {
    var nRows = $(".modem_row").length;
    if ( nRows > 0) {
      var width = $(".progress-bar").width();
      var unit = width/nRows;
      var $statusDiv = $(".progress-bar").children('.status').eq(0);
      var oldWidth = 0;
      var newWidth = 0;
      var i = 0;

      $(".modem_row").each(function(){
        var modem_id = $(this).attr("id");
        $.ajax({
          url: "/modules/get_modem_state.php?modem_id="+modem_id,
          success: function(data) {
            oldWidth = $statusDiv.width(); 
            newWidth = oldWidth + unit;
            $statusDiv.width(newWidth);                    
            if ( ++i == nRows ) {
              $('.status').fadeOut();
            }
            if (data == 'online') {
              $('#'+modem_id).animate({color: 'black'});
            }
          }
        });
      });
    }
  });
</script>