jQuery animate callback fires before the animation is complete

Question

I want to make a progress bar on a rails app that I'm working on. I am using the Bootstrap 4 progress bar.

Here is the code that I am using to change the progress bar width with respect to ajax requests.

<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');
  });
});

The problem is that the animate callback gets executed before the progress bar width ever reaches 100%.

The width of the progress bar reaches midway and then suddenly it goes back to 0.

What am I missing here?