barra de % completado de x operación

lmerli · #1 (**permalink**) 18/12/2010, 12:47

Hola, en mi pagina web, hago unas operaciones que tarda una media de 1 segundo cada una, ahora sólo lo hago con 10 datos, pero más tarde van a ser más, lo que quiero es algo visual conforme se que estoy haciendo algo.

lo que necesito creo que se deve hacer con ajax... y consiste en; yo a cada vuelta del bucle le hago un flush(); asi pues se por la vuelta que va, asi pues, si tengo 10 datos, y voy por el 2, tengo un 20% de la operación completada. Ya anteriormente lo habia intentado hacer con un css y recargado la pagina con javascript pero queda muy feo y se nota mucho.

entonces necesito una manera para yo pasar el porcentaje y que la imagen se me vaya creando sola, sin que se note el refresco..

gracias!

lmerli · #2 (**permalink**) 19/12/2010, 08:58

bueno, despues de unos cuantos quebradeos de cabeza, he encontrado esto.

Código Javascript:

Ver original<script language="javascript">
//Creo una función que imprimira en la hoja el valor del porcentanje asi como el relleno de la barra de progreso
function callprogress(vValor){
 document.getElementById("getprogress").innerHTML = vValor;
 document.getElementById("getProgressBarFill").innerHTML = '<div class="ProgressBarFill" style="width: '+vValor+'%;"></div>';
}
</script>

Código CSS:

Ver original<style type="text/css">
/* Ahora creo el estilo que hara que aparesca el porcentanje y relleno del mismoo*/
      .ProgressBar     { width: 16em; border: 1px solid black; background: #eef; height: 1.25em; display: block; }
      .ProgressBarText { position: absolute; font-size: 1em; width: 16em; text-align: center; font-weight: normal; }
      .ProgressBarFill { height: 100%; background: #aae; display: block; overflow: visible; }
    </style>

Código HTML:

Ver original</head>
<body>
<!-- Ahora creo la barra de progreso con etiquetas DIV -->
 <div class="ProgressBar">
      <div class="ProgressBarText"><span id="getprogress"></span>&nbsp;% completado</div>
      <div id="getProgressBarFill"></div>
    </div>

Código PHP:

Ver original<?php
 /*Ahora procedo a crear la situación de importacion de registros, para este caso utilizaré el bucle FOR, también puede funcionar con WHILE. Recuerden sólo en este caso estaré utilizando for ya que es a modo de ejemplo y no estoy trabajando con base de datos*/
$ValorTotal=25; //Valor total de registros
 
for($i=1;$i<=$ValorTotal;$i++){ //le digo que si es igual al total detengo el bucle
 sleep(1); //descanso 1 minuto para mostrar de forma pausada el proceso
 $porcentaje = $i * 100 / $ValorTotal; //saco mi valor en porcentaje
 echo "<script>callprogress(".round($porcentaje).")</script>"; //llamo a la función JS(JavaScript) para actualizar el progreso
 flush(); //con esta funcion hago que se muestre el resultado de inmediato y no espere a terminar todo el bucle con los 25 registros para recien mostrar el resultado
 ob_flush();
}
?>

Código TODOJUNTO:

Ver original<html><head>
<script language="javascript">
//Creo una función que imprimira en la hoja el valor del porcentanje asi como el relleno de la barra de progreso
function callprogress(vValor){
 document.getElementById("getprogress").innerHTML = vValor;
 document.getElementById("getProgressBarFill").innerHTML = '<div class="ProgressBarFill" style="width: '+vValor+'%;"></div>';
}
</script>
<style type="text/css">
/* Ahora creo el estilo que hara que aparesca el porcentanje y relleno del mismoo*/
      .ProgressBar     { width: 16em; border: 1px solid black; background: #eef; height: 1.25em; display: block; }
      .ProgressBarText { position: absolute; font-size: 1em; width: 16em; text-align: center; font-weight: normal; }
      .ProgressBarFill { height: 100%; background: #aae; display: block; overflow: visible; }
    </style>
</head>
<body>
<!-- Ahora creo la barra de progreso con etiquetas DIV -->
 <div class="ProgressBar">
      <div class="ProgressBarText"><span id="getprogress"></span>&nbsp;% completado</div>
      <div id="getProgressBarFill"></div>
    </div>
 
<?php
 /*Ahora procedo a crear la situación de importacion de registros, para este caso utilizaré el bucle FOR, también puede funcionar con WHILE. Recuerden sólo en este caso estaré utilizando for ya que es a modo de ejemplo y no estoy trabajando con base de datos*/
$ValorTotal=25; //Valor total de registros
 
for($i=1;$i<=$ValorTotal;$i++){ //le digo que si es igual al total detengo el bucle
 sleep(1); //descanso 1 minuto para mostrar de forma pausada el proceso
 $porcentaje = $i * 100 / $ValorTotal; //saco mi valor en porcentaje
 echo "<script>callprogress(".round($porcentaje).")</script>"; //llamo a la función JS(JavaScript) para actualizar el progreso
 flush(); //con esta funcion hago que se muestre el resultado de inmediato y no espere a terminar todo el bucle con los 25 registros para recien mostrar el resultado
 ob_flush();
}
?>

De esta manera, a cada vuelta del bucle mando la info con flush() y hago su porcentaje.

¿Alguien me puede orientar o sabe como podria hacer ahora que vaya informando del proceso por el que voy? es decir, proceso X de Totales.

Gracias, Un saludo!