How to make a progressbar to send email ajax + phpmailer?

Question

JavaScript

Hello. I send a file using ajax and phpmailer from the site to my mail. It sends and arrives without problems, only there is a small problem: if you send a large file, the user will not be able to monitor what is happening and may think that nothing is happening, so I decided to fasten the progressbar.
There he is:

<progress id="progressbar" value="0" max="100"></progress>

$(function(){
  'use strict';
  var progressBar = $('#progressbar');
$('#form').on('submit', function(e){
    e.preventDefault();
    var fd = new FormData( this );
    $.ajax({
      url: 'send.php',
      type: 'POST',
      contentType: false, 
      processData: false, 
      data: fd,
      success: function(msg){
if(msg == 'ok') {
  $(".send").val("Отправлено"); 
} else {
        $(".send").val("Ошибка");
        setTimeout(function() {$(".send").val("Отправить");}, 3000);
}
      },
      xhr: function(){
        var xhr = $.ajaxSettings.xhr();
        xhr.upload.addEventListener('progress', function(evt){
          if(evt.lengthComputable) {
            var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
            progressBar.val(percentComplete).text('Загружено ' + percentComplete + '%');
          }
        }, false);
        return xhr;
      }
    });
  });
});

There is only one bug here. The progress bar fills up in a couple of seconds, even if the file is large. With small files, it fills up in about a second, and with large files: 2-3 seconds. However, the response from the server about the successful sending of the letter will come only after 10 seconds with a small file, and after 25 seconds with a large one.
To paraphrase: I select a file > I press send > in a couple of seconds the progress bar is filled up to 100% > in 15 seconds a response comes from the server that the letter has been sent.
How to solve such a problem? How to fill the progress bar relatively evenly?