If you have a lot of AJAX in a file and you want to add loading to them, then you can define this place without adding a loader on each AJAX.

First you will need a loader. You can use any loader, we are using <div class="loader-class" id="loader"> this div here as a loader. Its default display will be hidden with CSS or JS.

IF CSS: .loader-class{ display: none; }
IF JS: $('#loader').hide();

Then the code you need to show the Loader on your Ajax, It’s given below.

<script type="text/javascript">
     $( function() {
           $( document ).ajaxSend( function( ) {
                 $( '#loader' ).show();
           } );

           $( document ).ajaxSuccess( function( ) {
	         $( '#loader' ).hide();
           } );

           $( document ).ajaxComplete( function( ) {
	         $( '#loader' ).hide();
           } );

           $( document ).ajaxStart( function( ) {
	         $( '#loader' ).show();
           } );

           $( document ).ajaxStop( function( ) {
	         $( '#loader' ).hide();
           } );
      } );
</script>