JQuery анимированный обратный вызов срабатывает до завершения анимации

Question

Я хочу создать индикатор прогресса в приложении, на котором я работаю. Я использую индикатор загрузки Bootstrap 4.

Вот код, который я использую для изменения ширины индикатора выполнения относительно запросов AJAX.

<div class='progress' style='height: 1.5px;'>
  <div class='progress-bar' role='progress bar' style='width: 0%;' aria-valuenow = '0' aria-valuemin = '0' aria-valuemax = '100'>
  </div>
</div>



$(document).ajaxStart(function(event) {
   $('.progress-bar').animate({
      width: '87%'
    }, 700)
});


$(document).ajaxComplete(function(event) {
  $('.progress-bar').animate({
     width: '100%'
   }, 300, function() {
    $('.progress-bar').width('0');
  });
});

Проблема заключается в том, что функция обратного вызова animate выполняется до того, как ширина индикатора выполнения достигает 100%.

Ширина индикатора выполнения достигает середины, а затем внезапно возвращается к 0.

Что мне здесь не хватает?