javascript - Animate progress Bar on execution of PHP script using JQuery

I got a form that sends some information on a PHP page. I managed to animate the progress bar on form submit and I would like to animate the progress bar on the script execution duration too.

My script gets the information and sends them to a lot of email addresses (like newsletters).

My FORM with the progress bar:

<form id="formImport" action="PHP/traitementImport.php" method="POST" enctype="multipart/form-data">
  <div >
    <label >Catégorie</label>
    <div >
      <?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 name="categ" 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 ?>" ><?php echo $intitule ?></option>
            <option value="<?php echo $titrefr ?>" id="<?php echo $idg ?>titrefr" ></option>
            <option value="<?php echo $titreuk ?>" id="<?php echo $idg ?>titreuk" ></option>
        <?php } ?>
      </select>
    </div>
  </div>
  <div >
    <label >Titre FR</label>
    <div >
      <input type="text" id="inputRapportFR" name="rapportFR" placeholder="Titre du rapport français">
    </div>
  </div>
  <div >
    <label >Titre UK</label>
    <div >
      <input type="text" id="inputRapportUK" name="rapportUK" placeholder="Titre du rapport anglais">
    </div>
  </div>
  <div >
    <label >Rapport FR</label>
    <div >
      <div >
        <span >
          <span >
            Choisir dossier <input id="rapportFR" name="rapportFR[]" type="file" multiple directory="" webkitdirectory="" mozdirectory="">
          </span>
        </span>
      <input type="text" placeholder="RAPPORT FRANCAIS" readonly />
    </div>
   </div>
 </div>
 <div >
   <label >Rapport UK</label>
   <div >
     <div >
       <span >
         <span >
           Choisir dossier <input id="rapportUK" name="rapportUK[]" type="file" multiple directory="" webkitdirectory="" mozdirectory="">
         </span>
       </span>
       <input type="text" placeholder="RAPPORT ANGLAIS" readonly>
     </div>
   </div>
 </div>
 <div >
   <div >
     <button id="btnEnvoyer" type="submit" >Envoyer</button>
   </div>
 </div>
</form>
<div >
  <div ></div>
    <div >0%</div>
  </div>
<div id="status"></div>
Copy code

My Javascript Code:

(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);
            }
        });
    })();
Copy code

I want to call 'MyScript.php', execute it without changing page and display and animate my progress bar on execution of it.