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