jQuery each плюс ajax - не работает прогрессбар
 

Доброго дня всем.
Циклом перебирается массив, по его параметрам отравляются запросы ajax. Запросов много, поэтому добавил async: false. Хотел к этому делу прикрутить прогрессбар, но не выходит. Firefox работает корректно, остальные нет. Подскажите, почему и как обойти?
Пример

Остальные да.

<style>
.progress0 { height:20px; margin:10px 0 0; width:0px; background-color: blue; transition: width 10000ms linear; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="progress0"></div>
<button id="start">
Start
</button>
<script>
var arr = [];
for (var i = 0; i < 50; i++) {
    arr.push(i);
};
$('#start').on("click",function(){
var str = '';
  $(arr).each(function(i,a){
    $.ajax({
        type: 'GET',
        url: 'https://google.com',
        async: false,
        complete: function () {
   			 $(".progress0").css("width",i*2+'%');
        }
    });
  });
});
</script>

Но странный прогрессбар

Я анимацию для плавности добавлял, а не для эмуляции работы прогрессбара.

Подойдет. Спасибо!