title: Simple jQuery progressbar
body: <p>Suppose: There is some cablemodems, and a man want to list their data from a MySQL database. (ip address, mac address, modemtype, ...)</p>
  
  <p>Here is the HTML and PHP code: ($limit value: 15 or 25 or 50, which the user can select)</p>
  
  <pre><code>&lt;table&gt;
    &lt;?php
      $sql = "SELECT ... needed fields from some tables... LIMIT $start, $limit";
  
      $result = mysqli_query( $conn, $sql ) or trigger_error( mysqli_error( $conn ) );
  
      while ( $row = mysqli_fetch_object( $result ) ) {
        echo "&lt;tr class='modem_row' id='$row-&gt;modem_id' style='color:gray'&gt;\n";
        echo "&lt;td&gt;$row-&gt;mac_address&lt;/td&gt;\n";
        echo "&lt;td&gt;$row-&gt;ip_address&lt;/td&gt;\n";
        echo "&lt;td&gt;$row-&gt;type&lt;/td&gt;\n";
        // ...
        echo "&lt;/tr&gt;\n";
      }
  
      mysqli_free_result( $result );
    ?&gt;
  &lt;/table&gt;
  
  &lt;div id="progress" style="display:none; width:150px; height:20px"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When the database query is done, then a jQuery script query all displayed modem whether they are 'online' or not (via SNMP). Here is the jQuery script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(function() {
      $(".modem_row").each(function(){
        var modem_id = $(this).attr("id");
        $.ajax({
          url: "/modules/get_modem_state.php?modem_id="+modem_id,
          success: function(data) {
            if (data == 'online') {
              $('#'+modem_id).animate({color: 'black'});
            }
          }
        });
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>OK, it works. But i want to see the whole ajax progress in a simple HTML div. When the jQuery script begin, then it would be good the 'progress' div appear, then show the percent in a simple colored bar, and when the all ajax query done, then the 'progress' bar disappear.</p>
  
  <p>(for example if $limit = 15, there is 15 ajax query. If the first query done, then the 'progress' div width will be 10px, after the second ajax query is done, the 'progress' div width will 20px, etc..)</p>
  
  <p>I think that the jQuery Progressbar should I use, but I do not know how to glue together.</p>