show loader when ajax is working

$(function () { $(document).ajaxStart(function () { $("#Loader").show(); }); $(document).ajaxStop(function () { $("#Loader").hide(); }); $(document).ajaxError(function () { $("#Loader").hide(); }); }); 

The other answers require you to duplicate the show/hide code for each ajax call. This is fine if you only have 1 call, but I assume you have several calls in your app.

My code above will show your loader during all ajax requests. I suggest adding it to your layout page, or putting it in a common js file.

#Loader is up to you. In my site, I style it as a fixed position element with a centered progress bar. Here is some basic styling you can use as a starting point.

#Loader { position: fixed; width: 100%; height: 100%; display: none; background-color: #fff; opacity: 0.6; z-index: 99999; } 

Have a div#ajax-loader somewhere in your document and set it's styles:

/* You can style this further - this is just an example */ #ajax-loader { position: absolute; width: 100%; height: 100%; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.5); padding-top: 35%; display: none; } 

And place it in your document as:

<div id="ajax-loader">Loading content...</div> 

Now, change your jQuery code into:

$("#send").click(function() { if ($("#ccval").val() == $("#contactcaptcha").text()) { var id = $("#contactcaptcha").attr("data-id"); var cemail = $("#cemail").val(); // notice this line $('#ajax-loader').show(); // this will set display: none; -> display: block; for this element $.post(base_url + "index.php/myad/getphonenumber", { uniqueid: id, emailaddress: cemail }, function() { alert('email is sent'); // notice this line too $('#ajax-loader').hide(); // just toggle the view vice-versa... }) } else { $("#ccval").val(""); $("#ccval").attr("placeholder", "invalid captcha"); } }); 

EDIT: Also, an answer below posted by Kev is highly suggested.

Well, first you need to make whatever image overlay you want. That's just CSS/HTML and up to your presentation. But here's one way to do it:

$(trigger).on('whatever', function(){ ... $(loading_selector).show() $.ajax({ ..., success:function(data) { $(loading_selector).hide(); } }); }); 

The problem here is, the loading selector will not hide if your ajax fails, so you'll need to add in some code to catch ajax errors and hide the loading pane in that logic block as well.

Use the show loading indicator before you call Ajax and hide it afte the success or error case or you can use the complete handler of jQuery ajax

 $("#send").click(function() { if ($("#ccval").val() == $("#contactcaptcha").text()) { var id = $("#contactcaptcha").attr("data-id"); var cemail = $("#cemail").val(); //Start showing loading indicator showLoadingIndicator(); $.post(base_url + "index.php/myad/getphonenumber", { uniqueid: id, emailaddress: cemail }, function() { hideLoadingIndicator(); alert('email is sent'); }) } else { hideLoadingIndicator(); $("#ccval").val(""); $("#ccval").attr("placeholder", "invalid captcha"); }})}); 

Show it before request is sent and hide when it's done.

$('#loader').show(); $.post('example.php', function() { alert('success'); }).always(function() { alert('finished'); $('#loader').hide(); }); 

Using $.ajax I think could be easier:

$.ajax({ url: base_url + "index.php/myad/getphonenumber", beforeSend: function(xhr){ //show load }, data: { uniqueid: id, emailaddress: cemail } }).done(function(d){ alert('email is sent'); }).always(function(){ //remove load })