Loader not working during synchronous ajax call in chrome

I was also facing same problem from last 1 year Even with async: false. Finally got a best solution, but not sure that it will work in you case, it worked me 101%.

Below is code:-

    $.ajax({                 .. ,              beforeSend: function () { showLoader(); },             success: function (data) { hideLoader(); }     });function showLoader() {    $("#progressbar").css("display", "");}function hideLoader() {    setTimeout(function () {        $("#progressbar").css("display", "none");    }, 1000);}

you can make these two function common in any common javascript file. So that you can call these function multiple places or js files.

Html is :

<div class="spinnermodal" id="progressbar" style="display: none; z-index: 10001">  <div style="position: fixed; z-index: 10001; top: 50%; left: 50%; height:65px">      <img src="~/Images/loading.gif" alt="Loading..." />    </div></div>

Css is:

.spinnermodal {        background-color: #FFFFFF;        height: 100%;        left: 0;        opacity: 0.5;        position: fixed;        top: 0;        width: 100%;        z-index: 100000;    }

Try this. I hope it will work for you as well. Happy coding :-)

Put setTimeout before the ajax request. I have tried many solutions but this one definitely works.

$("#loader").show();setTimeout(function () {  //AJAX REQUEST CODE  $("#loader").hide();},10);

Or simply this

$.ajax({                     .. ,                  beforeSend: function () { $('#LoaderDiv').show(); },                 success: function (data) { $('#LoaderDiv').hide(); }         });

which will make it little more fast