How to show a progress loader in an Ajax call REST api

Show a progress loader in an Ajax call SharePoint REST api 

In most of our BAU requirements we need to show a progress loader in an Ajax call while data loads. There are several methods you can use, below is the code which i have implemented and you can use the same in your requirements.

Code - 

function bindData(url1)

{

         $.ajax({

                url: url1,

                method: "GET",

                dataType: 'json',

                beforeSend: function () { 

                   $(".loader").show();

                }, 

                headers:

                {

                        "Accept": "application/json; odata=verbose"

                },                                                           

                success: function success(data)

                {

                        // You can write your code here                       

                },

                complete: function (data) { 

                  $(".loader").hide();

                },

                error: function error(err)

                {

                        console.log(JSON.stringify(err));

                        alert(JSON.stringify(err));

                }

        });

}

I have used beforeSend and complete in the above code where we set our loader in hide/show states.