New question

Question:

Date: 29-01-2015 08:14:29 (In Spanish)

¿Cómo hacer un progressbar en PHP?[Resolved]

Saludos, quisiera saber como creo un progressbar en php, esto me sirve para mostrar las estadisticas de cada usuario en mi web, quisiera saber como poder hacerlo, si es mediante javascript, css, o mediante php.
Gracias por su colaboración.
Tags: Download Files - HTML - Javascript - JQuery - PHP - Progress Bar - Question - Upload Files Votes: 3 - Answers: 15 - Views: 45 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 29-01-2015 08:56:02 Progress bar para estadísticas? No será una gráfica de barras?
    De cualquier modo ocuparás HTML5, javascript, css y tal vez PHP dependiendo de lo que quieras.
    LMGTFU
    Si nos compartes más info te podremos ayudar mejor
      Votes: 1 - Link answer
     
  • Date: 29-01-2015 13:45:52 Saludos, algo similar a ésta barra del video:

    HOWTO: Dynamic PHP progress bar



      Votes: 0 - Link answer
     
  • Date: 29-01-2015 15:35:25 no has probado en copiar el codigo que esta desarrollado en ese video?   Votes: 0 - Link answer
     
  • Date: 29-01-2015 15:42:29 Esta es una forma bastante sencilla de crear gráficos mediante PHP y HTML.

    A partir de una array, que podría construirse a partir de datos extraídos de una base de datos, se extraen los literales, se calcula el porcentaje y se le asigna un color para cada una de las barras.

    Supongamos que tenemos los siguiente valores de los usuarios: 220 de Walter, 160 Pedro, 80 de Maria, 225 de Fernandoy y 35 de Eliana.

    El script para generar un gráfico podría ser:


    <html>
    <style type="text/css">
    <!--
    table {
    	font: 11px Verdana, Arial, Helvetica, sans-serif;
    	color: #777;
    	padding:7px;
    }
    -->
    </style>
    <?php
    $datosTabla = array(
    		array( "Pedro", 160, "#BDDA4C"),
    		array( "Walter", 220, "#FF9A68"),
    		array( "Maria", 80, "#69ABBF"),
    		array( "Fernando", 225, "#FFDE68"),
    		array( "Eliana", 35, "#AB6487")
    );
    $maximo = 0;
    foreach ( $datosTabla as $ElemArray ) { $maximo += $ElemArray[1]; }
    ?>
    <body>
    <table width="400" cellspacing="0" cellpadding="2">
    <?php foreach( $datosTabla as $ElemArray ) {
    $porcentaje = round((( $ElemArray[1] / $maximo ) * 100),2);
    ?>
    <tr>
    	<td width="20%"><strong><?php echo( $ElemArray[0] ) ?></strong></td>
    	<td width="10%"><?php echo( $porcentaje ) ?>%</td>
    	<td>
    		<table width="<?php echo($porcentaje) ?>%" bgcolor="<?php echo($ElemArray[2]) ?>">
    		<tr><td></td></tr>
    	</table>
    	</td>
    	</tr>
    	<?php } ?>
    </table>
    </body>
    </html>


    Demo en: Barra Grafica

    Claro que lo debes ajustar a tus necesidades.
    solo modificas el array

    cada Array es una fila (Un usuario en tu caso)
    ej: array( "UsuarioX", 110, "#FF9A68")

    Tiene tres datos: Leyenda, Valor, Color de barra

    Espero que te sirva

    Saludos
    // Me gane +220 de karma con esto, no? jaja
      Votes: 3 - Link answer
     
  • Date: 30-01-2015 11:10:36 Gracias amigo, me sirvió   Votes: 1 - Link answer
     
  • Date: 31-01-2015 21:51:34 Hola a todos, aquí les dejo un ejemplo dinámico de progressbar:

    <?php header('X-Accel-Buffering: no');?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>PHPCentral Progressbar</title>
            <style type="text/css">
                .barra{
                    background-color: #f5f5f5;
                    border-radius: 5px;
                    height: 25px;
                    width: 300px;
                    border: solid 1px #ccc;
                    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
                }
                .progreso{
                    border-radius: 5px;
                    height: 25px;
                    width: 0%;
                    border-right: solid 1px #ccc;
                    background-color: lightblue;
                    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                }
                .porcentaje{
                    padding-right: 7px;
                    padding-top: 2px;
                    text-align: right;
                }
            </style>
        </head>
        <body>
            <h3>PHPCentral Progressbar</h3>
            <div class="barra">
                <div class="progreso"><div class="porcentaje"></div></div>
            </div>
        </body>
    </html>
    <?php
    @ob_flush();
    flush();
    $total = 200;
    for ($i = 0; $i <= $total; $i = $i + 10):
        $actual = $i;
        $porcentaje = round(($actual / $total) * 100, 0);
        ?>
        <script type="text/javascript">
            document.getElementsByClassName("progreso")[0].style.width = "<?php echo $porcentaje; ?>%";
            document.getElementsByClassName("porcentaje")[0].innerHTML = "<?php echo $porcentaje; ?>%";
        </script>
        <?php
        @ob_flush();
        flush();
        usleep(500000);
    endfor;
    ?>


    En el siguiente enlace pueden ver la demo funcionando

    Espero que mi código les sea de ayuda.

    Saludos,
    Fernando

    PD: Jose, no olvides cambiar el estado de la respuesta a "resuelta" (cuando lo este) y votar las respuestas que te fueron útiles. En este caso el comentario es para Jose, pero aplica a todos.
      Votes: 5 - Link answer
     
  • Date: 05-02-2015 03:21:42 Fernando una duda, y si hago la barra de forma tal que sea flotante para mientras carga cargar todos los elementos de la web y una ves concluida esta me muestre la web como seria por que mira que lo he intentado hacer y nada.

    Gracias por adelantado
      Votes: 1 - Link answer
     
  • Date: 06-02-2015 05:48:13 Hola Francisco, eso que comentas lo puedes hacer por sección de la web, a medida que se va cargando cada sección (ejemplo pre header, header, top body, middle body, bottom body, pre footer, footer, etc.) puedes ir haciendo el fush del código:

    <script type="text/javascript">
    document.getElementsByClassName("progreso")[0].style.width = "<?php echo $porcentaje; ?>%";
    document.getElementsByClassName("porcentaje")[0].innerHTML = "<?php echo $porcentaje; ?>%";
    </script>


    y con esto ir informando el estado de la carga.

    Otra alternativa para este caso es utilizar el plugin de JQuery "NProgress Plugin", aquí te dejo un enlace (en ingles) donde podras ver como implementarlo: http://tutorialzine.com/2013/09/quick-tip-progress-bar/

    Este es el enlace a la demo: http://demo.tutorialzine.com/2013/09/quick-tip-progress-bar/

    Observa que es similar a lo que hace Youtube:



    Espero que mi respuesta te sea de ayuda.

    Saludos y buen código,
    Fernando
      Votes: 3 - Link answer
     
  • Date: 06-02-2015 06:27:29 @Fernando muchas gracias... me gusta esa idea, no es como lo tenia pensado pero es mucho mejor que mi idea incluso hasta mas estetico gracias... ahora mismo lo pongo en marcha jeje gracias   Votes: 0 - Link answer
     
  • Date: 06-02-2015 06:55:42 Fernando muy bueno ese código ;)   Votes: 0 - Link answer
     
  • Date: 13-09-2017 11:27:00 Hola a todos:
    Tengo una pequeña duda como se llama las barras en las que cada circulo representa un avance en un curso. Necesito algo asi y no se como

    gracias!!!
      Votes: 0 - Link answer
     
  • Date: 24-03-2019 13:57:48 Fernando Mosquera, revise tu codigo de la Barra dinamica, haz hecho parecido a eso mas que al ingresar un dato en una caja de texto la barra aumente y esta a su vez se guarde en la bd? y al entrar a la pagina se vea el porcentaje?   Votes: 1 - Link answer
     
  • Date: 28-03-2019 06:30:01 Hola Jonathan, si, puedes hacer que a medida que ingresas texto en una caja de texto (imagino que te refieres a un control textarea) una progressbar se autocomplete y hacer un guardado/persistencia asincrona en la base de datos... javascript aquí es la clave, o bien un flush como el ejemplo que muestro mas arriba + iframe, todo va a depender de que tantantas ganas tengas de lograrlo, recuerda que si no vas por lo intelimágino el cielo es el limite.

    Saludos y buen código!
      Votes: 0 - Link answer
     
  • Date: 28-03-2019 13:54:40 Fernando Mosquera, muchas gracias por responder, tenia una duda acabo de ejecutar el codigo que publicaste y no me carga la barra de progreso :c acabo de revisar bien el codigo pero sigo con el mismo problema.   Votes: 0 - Link answer
     
  • Date: 28-03-2019 14:41:47 Tengo problemas con el metodo flush no me muestra el porcentaje, lo ejecute desde chrome y firefox.   Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In