Showing posts with label Progress Bar Jquery. Show all posts
Showing posts with label Progress Bar Jquery. Show all posts

Tuesday 26 April 2016

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

  });