Barra de carga

zeuslife · #1 (**permalink**) 14/09/2009, 05:14

Hola a todos!
Me gustaria hacer una barra de carga que, mediante se fuera terminando el tiempo de una cuenta atrás, se fuera rellenando. Es decir, una barra de tanto X Completado, y que vaya aumentando progresivamente.
¿Cómo podría hacer esto con PHP y AJAX?

Muchas Gracias!

GatorV · #2 (**permalink**) 14/09/2009, 09:15

Para hacer la barra es forzoso que uses Javascript, ahora sí quieres llenar esta carga con un evento en el servidor ahí si necesitas usar AJAX para informarle a la barra el porcentaje.

Saludos.

zeuslife · #3 (**permalink**) 14/09/2009, 15:22

ya, si eso lo se, por eso quiero saber como puedo hacer esa barra, y que se vaya rellenando mediante sucede X cosa (se completa un evento, o algo, sin tener que recargar la página)

zero221188 · #4 (**permalink**) 14/09/2009, 19:47

Una forma muy sencilla de hacer tu barra:

Código:

<body onload="javascript:crecer_barra();">
<script>
	function crecer_barra()
	{
		if(i<=300)
	    {var a=document.getElementById("barra").setAttribute("style","width:"+i+"px; height:40px; background-color:#999; border-color:#FFF;");}
		else
		{alert("Fin de la carga");clearInterval(x);}
		i++;
	}
	var x=setInterval(crecer_barra,10);
	var i=0;
</script>
<div style="border:#03F; border-style:double; width:300px; height:40px;">
<div id="barra" style="width:1px; height:40px; background-color:#999; border-color:#FFF;"></div>
</div>
</body>

Copia, pega y verás una barrita que se llena con este simple javascript... (probe en FF y Chrome)

Ahora... para hacer una consulta al servidor y sincronizarlo con la barra, el proceso seria similar, solo que en vez de usar el parametro i como argumento para hacer crecer la barra, utiliza tu respuesta (por ejemplo, la respuesta de una consulta a una bdd) dada por la aplicación que estas haciendo...

Si navegas un poco mas encontrarás barras mejor hechas que esta que he puesto a las prisas, pero seguro te dará idea de que hacer...

zeuslife · #5 (**permalink**) 15/09/2009, 01:49

Muchas gracias zero221188 por la respuesta. Entonces, por lo que he entendido, tendria que poner el tiempo que quiero que tarde la barra en llenarse, en el lugar de "i", ¿no? Es que todas las que he encontrado, son para llenarse "Por golpes" como si digamos, es decir, que entras y la barra ya está cargada, es como si fuera solo una imágen, no... se hace dinámica digamos.
Bueno, lo probaré a ver que hacemos.

Muchas Gracias a los dos!