javascript — Animate индикатор выполнения при выполнении PHP-скрипта с использованием JQuery

Я получил форму, которая отправляет некоторую информацию на странице PHP.
Мне удалось анимировать индикатор выполнения при отправке формы, и я также хотел бы анимировать индикатор выполнения по продолжительности выполнения скрипта.

Мой сценарий получает информацию и отправляет ее на многие адреса электронной почты (например, информационные бюллетени).

Моя ФОРМА с индикатором выполнения:

<form class="form-horizontal fadeIn animated" id="formImport" action="PHP/traitementImport.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-2 control-label">Catégorie</label>
<div class="col-sm-10">
<?php
$sql2 = "SELECT idg, intitule, titrefr, titreuk FROM groupe;";
$req2 = mysqli_query($mysqli, $sql2) or die('Erreur SQL !<br/>' . $sql2 . '<br/>' . mysqli_error($mysqli));
?>
<select class="form-control" name="categ" style="height:34px;" id="listeGroup">
<?php
while ($data2 = mysqli_fetch_array($req2)) { // Remplissage du SELECT
$idg = $data2['idg'];
$intitule = $data2['intitule'];
$titrefr = $data2['titrefr'];
$titreuk = $data2['titreuk'];
?>

<option value="<?php echo $idg ?>" class="valGroup"><?php echo $intitule ?></option>
<option value="<?php echo $titrefr ?>" id="<?php echo $idg ?>titrefr" style="display:none;"></option>
<option value="<?php echo $titreuk ?>" id="<?php echo $idg ?>titreuk" style="display:none;"></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Titre FR</label>
<div class="col-sm-10">
<input type="text" id="inputRapportFR" name="rapportFR" class="form-control" placeholder="Titre du rapport français">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Titre UK</label>
<div class="col-sm-10">
<input type="text" id="inputRapportUK" name="rapportUK" class="form-control" placeholder="Titre du rapport anglais">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Rapport FR</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Choisir dossier <input id="rapportFR" name="rapportFR[]" type="file" multiple directory="" webkitdirectory="" mozdirectory="">
</span>
</span>
<input type="text" class="form-control file" placeholder="RAPPORT FRANCAIS" readonly />
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Rapport UK</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Choisir dossier <input id="rapportUK" name="rapportUK[]" type="file" multiple directory="" webkitdirectory="" mozdirectory="">
</span>
</span>
<input type="text" class="form-control file" placeholder="RAPPORT ANGLAIS" readonly>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="btnEnvoyer" type="submit" class="btn btn-default">Envoyer</button>
</div>
</div>
</form>
<div class="progress" style="display:none;">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="status"></div>

Мой код Javascript:

(function () {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
beforeSend: function () {
$(".progress").show();
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function (xhr) {
bar.width("100%");
percent.html("100%");
status.html(xhr.responseText);
}
});
})();

Я хочу вызвать MyScript.php, выполнить его без изменения страницы и отобразить и анимировать мой индикатор выполнения при его выполнении.