Animation during ajax request

Navigation
1

Personally I have an ajax request, only that it is taking a little bit, it only me of the return when successful or not, but during the request I do not show the user how is the procedure. As I do so, while the request is made, I show one animaçãozinha showing that the request is being processed? My test server link PS: the images do not belong to me just used for testing purposes. 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="[email protected]" 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/[email protected]",
               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);
               }
           });
        }
    });
    
asked by anonymous 17.05.2017 / 20:58

1 answer

4

Before Success add a beforeSend, like this: 

$("#formcontato").submit(function(event){
    event.preventDefault();
     if (validar()){
       $.ajax({
           url: "https://formspree.io/[email protected]",
           method: "POST",
           data: $(this).serialize(),
           dataType: "json",
           beforeSend: function(){
               #('#titnotif').html('<img src="imagemLoading">');
           },
           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);
           }
       });
    }
});

You can change alert for anything, a load or whatever you prefer

    
17.05.2017 / 21:03
Complete Regressive Chronometer in Pure JS - Problem Counting click () does not recognize button dynamically inserted inside tr