1$.ajax({
2    xhr: function() {
3        var xhr = new window.XMLHttpRequest();
4
5        // Upload progress
6        xhr.upload.addEventListener("progress", function(evt){
7            if (evt.lengthComputable) {
8                var percentComplete = evt.loaded / evt.total;
9                //Do something with upload progress
10                console.log(percentComplete);
11            }
12       }, false);
13
14       // Download progress
15       xhr.addEventListener("progress", function(evt){
16           if (evt.lengthComputable) {
17               var percentComplete = evt.loaded / evt.total;
18               // Do something with download progress
19               console.log(percentComplete);
20           }
21       }, false);
22
23       return xhr;
24    },
25    type: 'POST',
26    url: "/",
27    data: {},
28    success: function(data){
29        // Do something success-ish
30    }
31});

1BY LOVE
2You need to call the progress bar class, That's IT
3
4beforeSend: function () 
5				{
6                    $('.loaderimg').show();
7                },
8complete: function () 
9				{
10                    $(".loaderimg").hide();
11                }

1$.ajax({
2    url: path,
3    type: 'post',
4    data: {payload: payload},
5    xhr: function () {
6        var xhr = $.ajaxSettings.xhr();
7        xhr.onprogress = function e() {
8            // For downloads
9            if (e.lengthComputable) {
10                console.log(e.loaded / e.total);
11            }
12        };
13        xhr.upload.onprogress = function (e) {
14            // For uploads
15            if (e.lengthComputable) {
16                console.log(e.loaded / e.total);
17            }
18        };
19        return xhr;
20    }
21}).done(function (e) {
22    // Do something
23}).fail(function (e) {
24    // Do something
25});