JQuery :: Animation Iside Loop Happens After Finish?

I have a problem with animation and I don't know how to solve it. It is a very easy think but I don't understand the behaviour. Let me explain: I have a loop with N iterations like this:

f
or(x=0;x<100;x++){
...
}
I have an HTML5 progress bar like this: <progress min="0" max="100" value="0" id="d2"></progress>

My target is do a task inside loop (using ajax) and update progress value every 10 loops. I add after loop an alert for debug purposes.so we have this:

for(x=0;x<100;x++){
if (x % 10){
$('#d2').animate({value:'+=[code].....

the result is the progress bar is updated with the desired animation but occurs after alert message.