PHP Como apresentar uma barra de progresso enquanto ocorre a gravação no banco de dados

Utilizo o script ‘pace.js’ para mostrar uma barra de carregamento em quando a página abre. Gostaria que essa barra aparecesse também quando submeto um formulário.
Fiz uma função e coloquei no onclick do input porém a barra de progresso aparece apenas depois que já foi feita a inclusão no banco e não durante.
Alguém sabe me dizer como apresentar essa barra de progresso enquanto os dados estão sendo gravados no banco?
sql

 $result_posts = "INSERT INTO Posts(titulo, subtitulo, paragrafo1, paragrafo2, paragrafo3, paragrafo4, referencias, imagem, dataPublicacao, Categoria_idCategoria, Usuarios_idUsuario) 
  VALUES('$titulo', '$subtitulo', '$paragrafo1', '$paragrafo2', '$paragrafo3', '$paragrafo4', '$referencias', '$imagem',  NOW(), '$categoria', '$idUser')";

          if (mysqli_query($con, $result_posts)) {
            
            $nome_final = $_FILES['imagem']['name'];
              
            if(move_uploaded_file($_FILES['imagem']['tmp_name'], $_UP['pasta']. $nome_final)){

             $_SESSION['msg'] = "<div class='alert alert-success' role='alert'>Artigo publicado com sucesso</div>";
             header( "refresh:2;url=postagem.php" );
             
            }else{
              $_SESSION['msg'] = "<div class='alert alert-success' role='alert'>Erro ao salvar a imagem na pasta</div>";
            }

          } else {
            echo "Error: " . $result_posts . "<br>" . mysqli_error($con);
          }
          mysqli_close($con); 

html

 <div class="modal-footer">
    <input type="submit" name="cancelar" id="cancelar" value="Cancelar" class="btn btn-primary">
    <input type="submit" name="salvarRascunho" id="salvarRascunho" value="Salvar Rascunho" class="btn btn-primary">
     <input type="submit" name="publicar" id="publicar" value="Publicar" class="btn btn-primary" onclick="anima()">
 </div>

pace css

.pace {
-webkit-pointer-events: none;
 pointer-events: none;

-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.pace-inactive {
display: none;
}

.pace .pace-progress {
background: #22df80;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

funcao para reiniciar o pace

function anima(){
   Pace.restart();
}

Olá Amigo, para está sua dúvida aconselho que utilize o AJAX ou XMLHttpRequest do javascript enquanto o PHP processa os dados, e então você pode pegar a porcentagem enquanto envia.

Clique para ver um vídeo representando isto Vídeo