Gif “Cargando” mientras se genera una consulta php mysql

publicado por: Anonymous

Buenos dias.
Tengo una pagina que envia por formulario post 3 variables, la misma es capturada por otra pagina y realiza una consulta y genera una tabla con datos de mysql.
Actualmente la tabla tiene 140.000 registros por lo que al momento de enviar los datos tarda unos 20 seg en armar todo.
Necesito que me guien para mostrar un gif que diga cargando al momento de dar click en el boton de enviar hasta que la otra pagina este generada.
Encontre ejemplos pero el efecto lo hace cuando la pagina ya se genero por lo que estoy esperando 20 seg y dsp hace el gif y el fade para mostrar lo que haya dentro de un div.
¿Me dan una mano? ¿Con que se hace o que tengo que buscar para poder aprenderlo?
Al dar click en buscar que ya me aparezca un gif “Cargando” hasta que la pagina siguiente pueda mostrar la tabla.
Muchas gracias.

solución

_x000D_

_x000D_

$(document).ready(function(){_x000D_
  var $btn = $('#btn');_x000D_
  var $data = $('.data');_x000D_
  var $loader = $('.loader');_x000D_
_x000D_
_x000D_
  $btn.click(function(){_x000D_
_x000D_
    $.ajax({_x000D_
     // ejemplo url_x000D_
     url: 'http://www.json-generator.com/api/json/get/cwjKzYsDTm?indent=2',_x000D_
     method: 'GET',_x000D_
     beforeSend: function() {_x000D_
      // aquí puedes poner el código paraque te muestre el gif_x000D_
      $data.html("");_x000D_
      $loader.show();_x000D_
     }_x000D_
    }).done(function(resp){_x000D_
      setTimeout(function(){_x000D_
       $loader.hide();_x000D_
       $data.html(resp[0].about);_x000D_
      }, 5000);_x000D_
    }).fail(function(err){_x000D_
      $loader.hide();_x000D_
      alert(err);_x000D_
    })_x000D_
    return;_x000D_
  });_x000D_
_x000D_
});

_x000D_

.loader {_x000D_
    border: 16px solid #f3f3f3; /* Light grey */_x000D_
    border-top: 16px solid #3498db; /* Blue */_x000D_
    border-radius: 50%;_x000D_
    width: 120px;_x000D_
    height: 120px;_x000D_
    animation: spin 2s linear infinite;_x000D_
    display: none;_x000D_
}_x000D_
_x000D_
@keyframes spin {_x000D_
    0% { transform: rotate(0deg); }_x000D_
    100% { transform: rotate(360deg); }_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<div>_x000D_
   <button id="btn">Enviar</button>_x000D_
_x000D_
  _x000D_
  <div class="data"></div>_x000D_
  <div class="loader"></div> _x000D_
</div>

_x000D_

_x000D_

_x000D_

Aquí tienes un ejemplo, adaptalo a tu aplicación.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *