Foros del Web » Creando para Internet » CSS »

barra de progreso

Estas en el tema de barra de progreso en el foro de CSS en Foros del Web. Buenos Dias, tengo el siguiente código que encontré en Internet para una barra de progreso la cual funciona, pero lo que no funciona es el ...
  #1 (permalink)  
Antiguo 05/03/2015, 11:18
 
Fecha de Ingreso: agosto-2004
Mensajes: 440
Antigüedad: 20 años, 3 meses
Puntos: 2
barra de progreso

Buenos Dias,

tengo el siguiente código que encontré en Internet para una barra de progreso la cual funciona, pero lo que no funciona es el relleno de la barra para el avance, alguien me puede ayudar por favor como hago que no solo me muestre el porcentaje sino que también me muestre el avance el relleno en el avance.
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<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>
<div align="center"><!-- 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>
</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();
}
?> 
</body>
</html>
__________________
paty :adios:
  #2 (permalink)  
Antiguo 05/03/2015, 13:03
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años
Puntos: 91
Respuesta: barra de progreso

puedes usar la Libreria Bootstrap y hacerlo con eso ;) o usar Jquery UI ;)

Bootstrap:
http://www.minddust.com/project/boot...otstrap-3-3-0/


JQUERY UI:
http://jqueryui.com/progressbar/#label
  #3 (permalink)  
Antiguo 05/03/2015, 13:26
 
Fecha de Ingreso: agosto-2004
Mensajes: 440
Antigüedad: 20 años, 3 meses
Puntos: 2
Respuesta: barra de progreso

la verdad es que no se como se hace para integrar eso con php
__________________
paty :adios:

Etiquetas: background, barra, html, progreso, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:28.