Pessoal eu tenho uma requisição ajax, Só que ela está demorando um pouquinho, ela só me da o retorno quando for com sucesso ou não, mas durante a requisição eu não mostro ao usuário como está o procedimento. Como eu faço para que, enquanto a requisição é feita, eu mostre uma animaçãozinha mostrando que a requisição está sendo processada? Meu servidor de testes: http://tiagotestes.esy.es PS: as imagens não me pertencem apenas usei para fins de testes. Form:
<div class="col-md-6" >
<form id="formcontato">
<br>
<label> Nome:</label>
<input type="text" id="nome" name="nome" class="form-control" placeholder="Nome" aria-describedby="basic-addon1">
<p class="palerta" id="valida_nome"></p>
<br>
<label>Email: </label>
<input type="text" id="email" name="email" class="form-control" placeholder="exemplo@exemplo.com" aria-describedby="basic-addon1">
<p class="palerta" id="valida_email"></p>
<br>
<label>Telefone:</label>
<input type="text" id="telefone" name="telefone" placeholder="00 0000-0000" class="form-control" aria-describedby="basic-addon1">
<p class="palerta" id="valida_telefone"></p>
<br />
<label>Mensagem:</label>
<textarea rows="6" class="form-control" placeholder="Deixe sua mensagem" name="mensagem" id="mensagem"></textarea>
<p class="palerta" id="valida_mensagem"></p>
<br>
<div class="text-center">
<input type="submit" class="button" value="Enviar"id="enviar"/>
</div>
</form>
<div class="notificacao text-center" id="notificacao">
<h2 id="titnotif">
</h2>
<p id="txtnotif"></p>
</div>
</div>
Request:
$("#formcontato").submit(function(event){
event.preventDefault();
if (validar()){
$.ajax({
url: "https://formspree.io/tiago_tmax@hotmail.com",
method: "POST",
data: $(this).serialize(),
dataType: "json",
success: function(){
$("#titnotif").html("Seu formulário foi enviado com sucesso!");
$("#txtnotif").html("Logo farei contato :)");
$("#notificacao").addClass("boa");
$("#notificacao").fadeIn("slow");
$("input").val("");
$("textarea").val("");
setTimeout(function(){
$("#notificacao").fadeOut("slow");
}, 5000);
},
error: function(){
$("#titnotif").html("Sua mensagem não foi enviada!");
$("#txtnotif").html("Por favor, tente contato pelo meu E-mail, ou telefone.");
$("#notificacao").addClass("ruim");
$("#notificacao").fadeIn("slow");
setTimeout(function(){
$("#notificacao").fadeOut("slow");
}, 5000);
}
});
}
});