How to show loading is in progress with the image using ajax

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 

 Collapse | Copy Code

 
  .divBackMain
        {
            z-index: 99;
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background-color: black;
            opacity: 0.4;
        }
        .divLoader
        {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 100;
            margin-left: -110px;
            margin-top: -110px;
            width: 220px;
            background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpPzVHnlXNXTc6jq2Po0M1-nmItU5hfQpTRgjwZN68pff20m-bYPgCx0Zt8PDWfMIjYKMvxPlTQPkmKKM8Qku4txlbbU1K_19mKVx6_VvdYL85-S5hl-xHfJgMshdgd4HVMF9x67D56hI/s1600/LoadingGIF.gif');
        }
        #DivLoaderContainer
        {
            display:none;
            }

 Collapse | Copy Code

 function UploadData() {
 
            $("#DivLoaderContainer").fadeIn(); //set fadeIn whenever ypu want to show loader
            $.ajax({
                type: "POST",
                url: "PageName.aspx/MethodName",
                contentType: "application/json;charset=utf-8",
                data: {}, //Parameters
                dataType: "json",
                success: function (data) {
 
                    $("#DivLoaderContainer").fadeOut(); //set logout after finish all process 

 
                },
                error: function (result) {
 

 
                }
            });

 

 Collapse | Copy Code

 <div id="DivLoaderContainer">
            <div class="divBackMain">
            </div>
            <div class="divLoader">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpPzVHnlXNXTc6jq2Po0M1-nmItU5hfQpTRgjwZN68pff20m-bYPgCx0Zt8PDWfMIjYKMvxPlTQPkmKKM8Qku4txlbbU1K_19mKVx6_VvdYL85-S5hl-xHfJgMshdgd4HVMF9x67D56hI/s1600/LoadingGIF.gif" />
            </div>
        </div>

I have set visible using $("#DivLoaderContainer").fadeIn(); before ajax call
and after completion of ajax call it should be disappear using $("#DivLoaderContainer").fadeOut();
you can set fadeIn and fadeOut as per your need.. :)