While I have successfully implemented a loader (.gif) using a div tag in an AJAX call for desktop screens, the same code is not functioning properly on mobile devices. Instead of displaying the loading animation, it simply shows a white screen.
<div id="loader" style="display: none;"></div>
<script type="text/javascript">
$(document).ready(function(){
$('.view_data').click(function(){
var id = $(this).attr("id");
$.ajax({
url:"abc.php",
method:"post",
data:{id:id},
beforeSend: function(){
// Show image container
$("#loader").show();
},
success:function(data){
// Do something
},
complete: function(){
// Hide image container
$("#loader").hide();
}
});
});
});
</script>
#loader{
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url('../../img/loader_ajax.gif');
background-position: 50% 50%;
background-color: rgba(255,255,255, 0.8);
background-repeat: no-repeat;
}