Ajax Loader

To display loading symbol while ajax call, you can use the below code.

Content Editor Code:

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="/sites/<sitename>/SiteAssets/CSS/Style.css" rel="stylesheet" type="text/css"/>
<script src="/sites/<sitename>/SiteAssets/Scripts/Test.js"></script> 

<div class="modal" id="modalDiv">&#160;</div>

Style.css Code:

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
        url('/sites/<sitename>/SiteAssets/Images/ajax-loader.gif')    //Use any images from your site
        50% 50% 
        no-repeat;
} 

body.loading {
    overflow: hidden;   
}

body.loading .modal {
    display: block;
}

Test.js Code:

$(document).on({
    ajaxStart: function() { $('body').addClass("loading");    },
    ajaxStop: function() { $('body').removeClass("loading"); }    
}); 


$(document).ready(function()
{
    //Ajax Code for loading data to you page
});