Show loading bar using jQuery when executing an AJAX request

Question

I am making an AJAX request with jquery like:

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

While this data is loading, I want to display a little text at the top of the page (which just says “loading ...”) without blocking .

how to do it?

Answer 1

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

ajaxSetup , ajax, beforeSend (.. ) ( , ), , ajaxSetup, .

Ajax ( ajax)

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

, , SendSend/complete ajaxSetup.

Answer 2

ajaxSetup

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

    //remove the div here
    }
    });

ajax

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

Answer 3

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

Answer 4

jQuery beforeSend complete. beforeSend complete .

Answer 5

:

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

, - ajax-, .. -: http://www.xaluan.com

Answer 6

Bootstrap.

       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
}