Show loader image and disable page/section while waiting for ajax request

Show loader image and disable page or div section while waiting for ajax request.
Use below example code:

HTML
<!-- Image loader -->
<div id="loader" class="ajax_loader" style="display: none;">
  <img src="images/ajax-loader.gif" width="32px" height="32px" />
</div>

JS
$.ajax({
type: 'POST',
url: 'URL',
dataType: 'json',
data: user,
beforeSend: function(){
$("#loader").show();
},success:function(response){
//Put your logic after success
},
complete:function(data){
$("#loader").hide();
}
});

Note: Include jquery.js before use above js

CSS
<style>
.ajax_loader{ position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.5);}
.ajax_loader img{ position:absolute; left:50%; top:50%;}
</style>

Comments

Popular posts from this blog

Creating Protected routes in ReactJS

Add and use wow.js into WordPress theme