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

Bootstrap Model.

       var loadingPannel;
         loadingPannel = loadingPannel || (function () {
             var lpDialog = $("" +
                 "
" +
                     "
" +
                         "
" +
                             "
Processing...
" +
                             "
" +
                                 "
" +
                                     "
 " +
                                       "Please Wait..." +
                                     "
" +
                                   "
" +
                             "
" +
                         "
" +
                     "
" +
                 "
");
             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
}