Show image while processing form


Two values are sent from a form:

<form action="accion.php" method="post">
 <p>Su nombre: <input type="text" name="nombre" /></p>
 <p>Su edad: <input type="text" name="edad" /></p>
 <p><input type="submit" /></p>

In the PHP file several processes are carried out that take a while to process:

$Master = new Maestro();

//----- PROCESOS
$cruzarCodigos = $Master->cruzarCodigos($_POST['nombre'], $_POST['edad']);
$cruzarNombres = $Master->cruzarNombres();
$cruzarFechas  = $Master->cruzarFechas();
$calcularSueldos = $Master->calcularSueldos();
$tpl = new Plantilla();
$tpl->assign('mensaje', 'PROCESO TERMINADO');

And in the Smarty template, a message is displayed after the process is finished.


Since the Submit button is clicked until the $ message is displayed, the screen freezes all the time it takes to process all processes. How can I show an image after clicking Submit and it disappears when I show the message?

asked by Piropeator 28.11.2018 в 05:32

1 answer

  **Con este codigo de css y el script de jquery mostraras un gift de tu elección que represente la carga de la página, el div con la clase loader lo pones debajo de la etique de apertura del body. Espero te sirva**  

   <script type="text/javascript"> 
        $(window).load(function() {
    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('images/uploading.gif') 50% 50% no-repeat rgb(249,249,249);
        opacity: .8;

<div class="loader"></div>
answered by 28.11.2018 / 22:33