ProgressBar working in firefox but not in Chrome

Question

In chrome real time changed in progressbar but in Chrome it displayed after complete all ajax call.

Actually  I pass one student id to Controller through ajax. then Controller pass me percentage.it wiill continue till last student.Its worked fine in firefox issue only in chrome

 

Eg:-

public int DataProcessing(DataProcess objDataProcess)

{

var percentage = 0;

try

{

   ///calculate and then Pass pecentage/////

   return percentage;

}

catch (Exception ex)

{

ex.Message.ToString();

return 0;

}

}

 

ajax

 

 

 if ($(this).text() == "\xa0\xa0Process Data") {

OpenprogressBarModal();

for (i = 0; i < selectedAssignShifts.length; i++) {

//alert("start For Loop");

selectedEmp = selectedAssignShifts[i];

var ProcessData = {

"monthProcess": $("#monthProcess").val(),

"yearProcess": $("#yearProcess").val(),

}

if (!inProgress) {

$.ajax({

url: '@Url.Action("xyz", "zbc")',

type: "POST",

contentType: "application/json;charset=utf-8",

data: JSON.stringify(ProcessData),

async: false,

dataType: 'json',

success: function (data) {

var percentComplete = parseInt(data);

inProgress = false;

$(".progress-bar").css({ width: percentComplete + '%' });

$('.progress-bar').html(percentComplete + '%');

},

error: function (e) {

message = "Unable to Data Processing";

OpenCommonModal(message);

}

});

}

}

}