JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<form>
     <input type="email" name="email" id="email" value="elporfirio@gmail.com" required>
     <button>
     Enviar email
     </button>
</form>

<div class="cargando">
  <img src="http://onatech.com.mx/images/loading-circle.gif" width="150">
  <br>
  Enviando ...
</div>

<div class="okay">
  <img src="https://static.mytaxi.com/images/layout-1/icons/success.svg" width="150">
  <br>
  Enviado correctamente.
</div>

CSS

.cargando, .okay {
  display: none;
}

JavaScript

$(document).ready(function(){
  var $form = $('form');
  var posting;
  var divCargando = $(".cargando");
  var divOkay = $(".okay");
  var url = '/echo/json/';
  var datos;
  
  $form.on('submit', function(e){
  	e.preventDefault();
    //Se muestra el cargando antes de enviar.
    mostrarLoading();
    
    var emailValue = $form.find('#email').val();
    datos = {json: JSON.stringify({email: emailValue})}
    
    posting = $.post(url, datos);
    posting.done(terminoEnvio);
    posting.fail(errorEnvio);
  });
  
  function terminoEnvio(result){
  		//esperar 2 segundos despues de que se reciba la respuesta
       setTimeout(function(){
         
         ocultarLoading();
         mostrarOkay();

					//esperar 2 segundos antes de ocultar el okay
         setTimeout(ocultarOkay, 2000);
       }, 2000);
  }
  
  function errorEnvio(error){
      alert('ocurrio un error');
      console.error(error);
  }
  
  function mostrarLoading(){
  	divCargando.show("slow");
  }
  
  function ocultarLoading(){
  	divCargando.hide("slow");
  }
  
  function mostrarOkay(){
    divOkay.show('slow');
  }
  
  function ocultarOkay(){
    divOkay.hide('slow');
  }
});