Bueno, yo utilizo esto y es cojonudo, pruébalo seguro que cubre tus expectativas de sobra:
Debes crear una página que es el popup con este código:
Nota: Crea un par de imágenes para la barra de desplazamiento que se va moviendo mientras se carga la imágen.
Y en el formualrio donde pones la action:
<form onSubmit="checkFileUpload(this,showProgressWindow( 'showProgress.html',300,300);return document.MM_returnValue;">
<HTML>
<HEAD>
<TITLE>Progress Bar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var intCounter = 0;
var Timer1;
function init() {
document.images[0].src = "alsblank.gif";
document.images[1].src = "alsblank.gif";
document.images[2].src = "alsblank.gif";
document.images[3].src = "alsblank.gif";
document.images[4].src = "alsblank.gif";
document.images[5].src = "alsblank.gif";
document.images[6].src = "alsblank.gif";
document.images[7].src = "alsblank.gif";
document.images[8].src = "alsblank.gif";
document.images[9].src = "alsblank.gif";
document.images[10].src = "alsblank.gif";
document.images[11].src = "alsblank.gif";
document.images[12].src = "alsblank.gif";
document.images[13].src = "alsblank.gif";
document.images[14].src = "alsblank.gif";
document.images[15].src = "alsblank.gif";
document.images[16].src = "alsblank.gif";
document.images[17].src = "alsblank.gif";
document.images[18].src = "alsblank.gif";
document.images[19].src = "alsblank.gif";
intCounter=0;
setTimeout("PBar();",100);
}
function PBar() {
if (intCounter == 21) {
Completed();
}
if (intCounter < 21) {
document.images[intCounter].src = "alsblue.gif";
document.Form1.PERCENT.value = intCounter;
//document.Form1.STARTER.value = eval(intCounter * 5) + " Percent Done";
intCounter++;
Timer1 = setTimeout("PBar()",50);
}
}
function Completed() {
document.Form1.PERCENT.value = "xx";
//document.Form1.STARTER.value = "Completed.";
setTimeout("Proceed()", 500);
}
function Proceed() {
alert("Completed.\nYou can add code in the Proceed() function to redirect the browser or do whatever.\nThis will add a neat effect while a graphics are loading, etcetera.");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="init()">
<p align="center">Se está subiendo el fichero, por favor espere un poco...</p>
<p align="center">Gracias!!</p>
<CENTER>
<BR><BR><BR><BR><BR><BR>
<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="alsblank.gif" name="1" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="2" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="3" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="4" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="5" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="6" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="7" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="8" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="9" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="10" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="11" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="12" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="13" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="14" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="15" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="16" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="17" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="18" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="19" HEIGHT=10 WIDTH=10 HSPACE=0><IMG SRC="alsblank.gif" name="20" HEIGHT=10 WIDTH=10 HSPACE=0>
</TD>
</TR>
</TABLE>
<FORM NAME="Form1">
<INPUT TYPE="TEXT" SIZE="2" NAME="PERCENT"><BR>
</FORM>
</CENTER>
</BODY>
</HTML>