How To Use Progress Bar With Ajax Request Jquery

Use The Code Below To Have Progress Bar with %age Complete For Fetching Data

Preview Of Jquery Ajax Loader

HTML CODE 

<div id="progressbar">
    <div class="progress-label">Loading...</div>

</div>

CSS CODE

.progress-label {
    float: left;
    margin-left: 50%;
    margin-top: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;

}

Javascript / Jquery Code



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

  });

Share this

Unknown