How to show progress bar while loading, using ajax

Question

I have a dropdown box. When the user selects a value from the dropdown box, it performs a query to retrieve the data from the database, and shows the results in the front end using ajax. It takes a little bit of time, so during this time, I want to show a progress bar. I have searched, and I have found numerous tutorials on creating progress bars for uploads, but I haven't liked any. Can anybody provides some helpful guidance for me?

My ajax code:

<script> $(function() {     $("#client").on("change", function() {       var clientid=$("#client").val();          $.ajax({             type:"post",             url:"clientnetworkpricelist/yourfile.php",             data:"title="+clientid,             success:function(data){              $("#result").html(data);             }         });      }); }); </script> 

Answer 1

This link describes how you can add a progress event listener to the xhr object using jquery.

$.ajax({     xhr: function() {         var xhr = new window.XMLHttpRequest();          // Upload progress         xhr.upload.addEventListener("progress", function(evt){             if (evt.lengthComputable) {                 var percentComplete = evt.loaded / evt.total;                 //Do something with upload progress                 console.log(percentComplete);             }        }, false);                // Download progress        xhr.addEventListener("progress", function(evt){            if (evt.lengthComputable) {                var percentComplete = evt.loaded / evt.total;                // Do something with download progress                console.log(percentComplete);            }        }, false);                return xhr;     },     type: 'POST',     url: "/",     data: {},     success: function(data){         // Do something success-ish     } }); 

Answer 2

<script> $(function() {     $("#client").on("change", function() {       var clientid=$("#client").val();      //show the loading div here     $.ajax({             type:"post",             url:"clientnetworkpricelist/yourfile.php",         data:"title="+clientid,         success:function(data){              $("#result").html(data);           //hide the loading div here         }     });      }); }); </script> 

Or you can also do this:

$(document).ajaxStart(function() {         // show loader on start         $("#loader").css("display","block");     }).ajaxSuccess(function() {         // hide loader on success         $("#loader").css("display","none");     });