Barra de progreso HTML PHP

Tengo un sitio web con un formulario que usa PHP para enviar los datos del formulario. ¿Hay alguna manera de crear una barra de progreso en la página que parece que está en acción, para que las personas no hagan clic en el botón más de una vez después de hacer clic y enviar la información de PHP?

Gracias.

Barra de progreso: Versión de texto simple:

 

Barra de progreso: basada en PHP (grphical):

  #text { position: absolute; top: 100px; left: 50%; margin: 0px 0px 0px -150px; font-size: 18px; text-align: center; width: 300px; } #barbox_a { position: absolute; top: 130px; left: 50%; margin: 0px 0px 0px -160px; width: 304px; height: 24px; background-color: black; } .per { position: absolute; top: 130px; font-size: 18px; left: 50%; margin: 1px 0px 0px 150px; background-color: #FFFFFF; } .bar { position: absolute; top: 132px; left: 50%; margin: 0px 0px 0px -158px; width: 0px; height: 20px; background-color: #0099FF; } .blank { background-color: white; width: 300px; }  "; // Now output the basic, initial, XHTML that // will be overwritten later: echo " 
Script Progress
0%
"; // Ensure that this gets to the screen // immediately: flush(); } // A function that you can pass a percentage as // a whole number and it will generate the // appropriate new div's to overlay the // current ones: function update_progress($percent) { // First let's recreate the percent with // the new one: echo "
{$percent} %
\n"; // Now, output a new 'bar', forcing its width // to 3 times the percent, since we have // defined the percent bar to be at // 300 pixels wide. echo "
\n"; // Now, again, force this to be // immediately displayed: flush(); } // Ok, now to use this, first create the // initial bar info: create_progress(); // Now, let's simulate doing some various // amounts of work, and updating the progress // bar as we go. The usleep commands will // simulate multiple lines of code // being executed. usleep(350000); update_progress(7); usleep(1550000); update_progress(28); usleep(1000000); update_progress(48); usleep(1000000); update_progress(68); usleep(150000); update_progress(71); usleep(150000); update_progress(74); usleep(150000); update_progress(77); usleep(1150000); update_progress(100); // Now that you are done, you could also // choose to output whatever final text that // you might wish to, and/or to redirect // the user to another page. ?>

Las barras de progreso en el contenido web son difíciles de corregir porque no conoce el tiempo total que tomará el proceso y no tiene indicadores de progreso del proceso que le permitan saber cuándo actualizar su barra. Tal vez sea mejor utilizar una imagen de carga giratoria como las disponibles en ajaxload.com .

Puede hacer que un div oculto cubra toda la página y activar el div en su javascript cuando esté esperando.

En tu html:

  

en el css:

 #wait { position:fixed; top:50%; left:50%; background-color:#dbf4f7; background-image:url('/images/wait.gif'); // path to your wait image background-repeat:no-repeat; z-index:100; // so this shows over the rest of your content /* alpha settings for browsers */ opacity: 0.9; filter: alpha(opacity=90); -moz-opacity: 0.9; } 

Y luego en tu JavaScript:

 ... $("#wait").show(); // when you want to show the wait image ... $("#wait").hide(); // when your process is done or don't worry about it if the page is refreshing 

Necesitará usar Javascript, le recomiendo que eche un vistazo a ProgressBar de JQuery .