Show a loading bar using jQuery while making a AJAX request

Question

I\'m making a AJAX request with jquery like:

$.get(\'/Stuff.php\', function (data) {
    $(\'#own\').html(data);
});

while this data is loa

Answer 1

use the ajaxSetup

$.ajaxSetup({
    beforeSend:function(xmlHttpRequest){
    //show the loading div here
    },
    complete:function(){

    //remove the div here
    }
    });

now make the ajax call

$.get('/Stuff.php', function (data) {
    $('#own').html(data);
});

Answer 2

3nigma is on the right track, but got one detail wrong, at least in the general case.

Using ajaxSetup only provides defaults, if later you make some ajax calls that specify their own callbacks for beforeSend (i.e. you need to set some specific headers) or complete (you want to handle both success and error the same) they will override the ones in ajaxSetup and your loading indicator will break.

Instead, use Global Ajax Events (more about ajax events)

$(document).ajaxSend(function(e, jqXHR){
  //show the loading div here
});
$(document).ajaxComplete(function(e, jqXHR){
  //remove the div here
});

This is a more generic solution that will not break even if other code also wants so set some global or local beforeSend/complete handlers or calls ajaxSetup.

Answer 3

Bootstrap Model.

       var loadingPannel;
         loadingPannel = loadingPannel || (function () {
             var lpDialog = $("" +
                 "<div class='modal' id='lpDialog' data-backdrop='static' data-keyboard='false'>" +
                     "<div class='modal-dialog' >" +
                         "<div class='modal-content'>" +
                             "<div class='modal-header'><b>Processing...</b></div>" +
                             "<div class='modal-body'>" +
                                 "<div class='progress'>" +
                                     "<div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='100' aria-valuemin='100' aria-valuemax='100' style='width:100%'> " +
                                       "Please Wait..." +
                                     "</div>" +
                                   "</div>" +
                             "</div>" +
                         "</div>" +
                     "</div>" +
                 "</div>");
             return {
                 show: function () {
                     lpDialog.modal('show');
                 },
                 hide: function () {
                     lpDialog.modal('hide');
                 },

             };
         })();

Ajax call

                    $.ajax({
                        url: "/",
                        type: "POST",
                        data: responseDetails,
                        dataType: "json",
                        traditional: true,
                        contentType: "application/json; charset=utf-8",

                        beforeSend: function () {

                            loadingPannel.show();

                        },
                        complete: function () {

                            loadingPannel.hide();
                        },
                        data: responseDetails
                    })
                    .done(function (data) {
                            if (data.status == "Success") {
//Success code goes here
}

Answer 4

just complete simple like that:

<style type="text/css">
#loadingbar {
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: -6px;
  width: 1%;
  height: 2px;
  background: #b91f1f;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
#loadingbar.waiting dd, #loadingbar.waiting dt {
  -moz-animation: pulse 2s ease-out 0s infinite;
  -ms-animation: pulse 2s ease-out 0s infinite;
  -o-animation: pulse 2s ease-out 0s infinite;
  -webkit-animation: pulse 2s ease-out 0s infinite;
  animation: pulse 2s ease-out 0s infinite;
}

#loadingbar dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}

#loadingbar dd {
  opacity: .6;
  width: 20px;
  right: 0;
  clip: rect(-6px,22px,14px,10px);
}

#loadingbar dd, #loadingbar dt {
  position: absolute;
  top: 0;
  height: 2px;
  -moz-box-shadow: #b91f1f 1px 0 6px 1px;
  -ms-box-shadow: #b91f1f 1px 0 6px 1px;
  -webkit-box-shadow: #B91F1F 1px 0 6px 1px;
  box-shadow: #B91F1F 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
</style>


<script type="text/javascript">
$(document).ready(function() {
    $.ajaxSetup({
        beforeSend:function(xmlHttpRequest){
            if ($("#loadingbar").length === 0) {
                  $("body").append("<div id='loadingbar'></div>")
                  $("#loadingbar").addClass("waiting").append($("<dt/><dd/>"));
                  $("#loadingbar").width((50 + Math.random() * 30) + "%");
            }
                  //show the loading div here
        },
        complete:function(){
                $("#loadingbar").width("101%").delay(200).fadeOut(400, function() {
                       $(this).remove();
                   });
        //remove the div here
        }
    });

});
</script>

put them to your page, and when ever you make ajax call the loading will show.. demo tested on my web: http://www.xaluan.com

Answer 5

You an use beforeSend and complete function of jQuery. In beforeSend you display your the control and on complete you hide it.

Answer 6

$("#loading").show();   //before send
$.get('/Stuff.php', function (data) {
    $('#own').html(data);
    $("#loading").hide();  //when sucess
});