Cosas web, algunas úles, algunas buenas.
Fushioko, tiendas de productos de Asia

jueves, febrero 02, 2006

Barra de progreso

En algunas circustancias es necesario indicar al usuario que la página está cargando datos y que debe esperar, normalmente se usa para ello un GIF animado con una ruedas girando, dando la sensación de que está trabajando, otras se pone el reloj de arena llenandose, esto va según gustos. Pero al usuario muchas veces lo que le interesa saber es si el aviso de espera está allí sin más o realmente está haciendo algo, ¿avanza o está colgado?. Por eso las presentaciones iniciales en Flash suelen tener una barra de progreso que indica que se está cargando la animación.
En HTML también se puede hacer, queda muy vistoso y puede ser fundamental para que el usuario o el visitante no se meta en Google y busque otra página.

38 Comentarios:

  • bueno pues me parecio una utileria para hacer más dinámico, de hecho es lo que estaba buscanco para añadirselo a mi sitio.....
    gracias..

    Por Anonymous Anónimo, a las 3/29/2006 03:03:00 a. m.  

  • De nada, me alegro de que te haya sido útil.

    Por Anonymous Luis, a las 3/29/2006 08:09:00 a. m.  

  • Es perfecta. Elegante y completa. La que necesito.

    Pero resulta que no tengo ni idea y no soy capaz de hacerla funcionar porque no entiendo el comentario final que haces al respecto. Así que me he quedado a medias y con la miel en los labios.

    No soy capaz de hacer una página web pero me las he ingeniado para hacer algo similar a base de blogs, quitando de aquí y copiando de allí hasta conseguir poner en internet lo que me interesaba. Tiene muchas fotos y sucede que la gente no espera a que cargue del todo y hay fotos que no salen, por eso me interesa una barra de progreso y un aviso pidiendo paciencia.

    Necesito un guía-burros ¿Sería mucha molestia que me facilitaras el código completo que he de insertar?

    Agradecido. Saludos.

    La página es http://crmmalaga.blogspot.com/

    Por Anonymous vicecomodoro@hotmail.com, a las 4/17/2006 01:12:00 a. m.  

  • Hola, me alegro que sea lo que necesitas, ahora te escribo y te cuento como hacerlo, de todas formas un ejemplo del código lo tienes aquí: http://mediamax.streamload.com/displaynone/Hosted/barra-de-progreso.zip

    Por Anonymous Luis, a las 4/19/2006 08:34:00 a. m.  

  • Hola mi pregunta o mas bien lo q necesito es como desaparezco la animacion para mostrar mi pagina...porq pongo tu animacion y despues mi pagina la pone abajo de la animacion como le puedo hacer..muchas gracias por la ayuda q puedas darme.

    mi correo es poloabel@hotmail.com

    Por Anonymous Polo, a las 6/06/2006 01:06:00 a. m.  

  • Hola Polo,

    Si ves, hay unos estilos, en ellos te encontrarás lo siguiente:

    div.texto-progreso {
    width: 100%;
    font-family: Arial;
    font-size: 25px;
    height: 70px;
    text-align: center;
    padding-top: 55px;
    padding-bottom: 0px;
    margin-top: 5px;
    color: #315C7C;
    background: url(espera.gif) no-repeat center top;
    }

    Tendrias que quitar la última línea.

    Saludos

    Por Anonymous Luis, a las 6/07/2006 10:30:00 a. m.  

  • Luis, tengo una duda, dices que se puede dar el caso que el proceso este del lado del servidor (yo hago paginas en ASP.NET). Como podría hacer para referenciar a los elementos html desde el server, me podrías dar un ejemplo por favor.

    Mi correo es omar.jonguitud@itesm.mx

    Por Anonymous Omar Jonguitud, a las 8/03/2006 11:26:00 p. m.  

  • Misma duda que omar, como inicio y termino el progress bar dependiendo del inicio y fin de un proceso del servidor ?

    Gracias... deyka_1000@hotmail.com

    Por Blogger deyka, a las 9/25/2006 09:24:00 p. m.  

  • Para que no aparezca el div una vez se ha cargado la página. Debeis de ponerle un id al div que muestra la animación y la barra:

    <div class="barra-progreso" id="barra_progreso">

    Y en el código de .net indicar que escriba un script de javascript que busque el elemento y lo oculte:

    Me.Page.RegisterStartupScript("Ocultar", "<script language='javascript'>document.getElementById("barra_progreso").style.display='none'</script>")

    Por Anonymous Anónimo, a las 1/25/2007 12:20:00 p. m.  

  • El anterior comentario de webmaster@bytebit.es

    Por Anonymous Anónimo, a las 1/25/2007 12:22:00 p. m.  

  • Gracias por tu aportación, la verdad es que el script se puede mejorar bastante

    Por Anonymous Luis, a las 1/25/2007 02:27:00 p. m.  

  • Que buena utilidad lo de la barra, es realmente lo que necesito, ahora mi consulta es: Me sirve para usarlo con paginas ASP, si me pueden ayudar con esto se los agradeceré, como lo inserto en mi página, la verdad no se mucho de esto pero, lo necesito para mi trabajo de tesis.

    Agradecida por vuestra ayuda.

    Por Blogger Sol, a las 1/30/2007 03:44:00 p. m.  

  • Hola Sol.

    Yo de ASP no se mucho, pero mientras vas mostrando la pagina tendrás que ir llamando a:
    progreso(porc), donde porc es un numero de 0 a 100 que debe ir aumentando
    Y no te olvides de hacer Flush en ASP para que envie el buffer de salida al navegador.

    Saludos

    Por Anonymous Luis, a las 1/30/2007 08:07:00 p. m.  

  • Hola yo quiero poner la barra de progreso en un script php que tarda un poco en cargar. La pregunta es que tengo que hace para aumentar la funcion progreso(n) a medida que se carga el archivo.

    Por Blogger Fede, a las 1/31/2007 05:52:00 p. m.  

  • Hola Fede.

    Tu tienes un script que tarda mucho, lo que tendrás que hacer es ir escribiendo a cada rato lo siguiente en HTML:
    <script>
    progreso(n); // n debe ir aumentando
    </script>
    No olvides hacer flush a continuación para que el navegador vaya recibiendo datos del servidor.

    Por Anonymous Luis, a las 1/31/2007 07:06:00 p. m.  

  • El problema es que lo que tarda mucho en el script es una sola cosa. Por lo tanto el script no abanza y no se aumentaria la barra. Lo que yo quisiera es una barra que esta el tiempo en el que el script se ejecuta en el servidor, para que el usuario no crea que no pasa nada, que en realidad el script esta trabajando.

    Por Blogger Fede, a las 1/31/2007 08:04:00 p. m.  

  • Hola, mira, al igual que la anterior pregunta. Yo estoy diseñando una pagina en php, dentro de esta realizó un script que tarda bastante en realizarse. Yo no tengo acceso a los procesos de este script. ¿Me podrias decir de que manera puedo hacer que la barra vaya aumentando mientras este script se carga?

    gracias

    Por Anonymous Irving, a las 2/22/2007 12:54:00 a. m.  

  • Hola Irving, me temo que si no tienes acceso al script no vas a poder hacer mucho. Te recomiendo que pongas un gif animado que haga ver que se está procesando la página.

    Saludos

    Por Anonymous Luis, a las 2/22/2007 08:53:00 a. m.  

  • Hola otra vez, muchas gracias por tu respuesta. Perdona que te moleste nuevamente y un poco tarde, lo que pasa es que me ocupe con otro modulo y ya no tuve tiempo de revisar. Continuando con el anterior tema, me podrias decir entonces como puedo hacer para que la imagen desaparezca al terminar de cargarse el script. Estoy programando en php.

    Por Anonymous Irving, a las 2/28/2007 03:08:00 a. m.  

  • Hola Irving.

    Deberías modificiar la función javascript progreso para cuando n sea 100 ocultar la capa barra-progreso.

    Saludos

    Por Anonymous Luis, a las 2/28/2007 08:05:00 a. m.  

  • Hola, felicidades por tu script, esta bueno aunque haya veces en que las versiones y tipos de navegadores compliquen todas estas cosas y ya no sea tan fácil como copiar y pegar.

    Tienes algún ejemplo en vivo de una página donde se utilice tu script?

    Muchas Gracias, buen trabajo ;)

    Por Anonymous Anónimo, a las 3/07/2007 07:48:00 p. m.  

  • Lo siento, no tengo ningún ejemplo.

    Por Anonymous Luis, a las 3/07/2007 10:52:00 p. m.  

  • hola a que te refieres con el Flush ?
    salu2 y gracias, muy interesante la barra de carga :)

    Por Blogger aldo1982, a las 6/20/2007 01:18:00 a. m.  

  • flush suele ser el nombre del método que vacía el buffer de salida del servidor, enviando los datos al navegador.

    Por Anonymous Luis, a las 6/20/2007 08:07:00 a. m.  

  • Pues esta muy, muy interesante el articulo, pero no puedo bajar el codigo y realmente lo necesito, o talvez puedas ayudarme de otra forma
    mi correo es jrgonzalezs@intelnett.com
    te lo agradecere mucho

    Por Anonymous Anónimo, a las 8/07/2007 07:09:00 p. m.  

  • Hola Luis, yo también estoy interesada en descargar el código pero tampoco puedo. Si me pudieras mandar el archivo comprimido a mjosanm@hotmail.com me harías un gran favor.

    Muchas gracias, muy buen trabajo.

    Por Anonymous Anónimo, a las 8/28/2007 01:17:00 p. m.  

  • El enlace no va, por favor me lo puedes mandar a chein_cl@terra.es? te lo agradecería muchisimo.

    Por Anonymous Anónimo, a las 9/18/2007 02:27:00 p. m.  

  • Hola no me va el link que te parece si me lo envías por fa: dylian17@gmail.com

    Por Blogger Dylian17, a las 11/23/2007 05:34:00 p. m.  

  • bueno tal como señalan , no logro que funcione el link seria posible que lo enviaran a mi correo miranda.tellez@gmail.com , gracias

    Por Blogger alejandro, a las 12/17/2007 08:57:00 p. m.  

  • Algien me pude decir por favor co usar estoi desde asp, y se puede poner un ejemplo real, por ejemplo cuando se hace upload, se envian datos desde un formulario o cuando se esta conectando a una base de datos.

    Gracias

    Por Anonymous Anónimo, a las 1/17/2008 12:12:00 a. m.  

  • Necesito que por favor me pasen el zip con el ejemplo que cuentan porque al igual que alguno de ustedes intento descargarlo pero no puedo.
    Mi mail es fsaadister@gmail.com
    gracias

    Por Anonymous Anónimo, a las 4/16/2008 02:07:00 p. m.  

  • hola no mas y notfound con la ZIP compadres!!! si alguien la tiene compartala o mi hermano como le hacemos?? mandamela en jammes_lbe7@hotmail.com gracias y bendiciones.

    Por Anonymous Jaime, a las 5/09/2008 06:25:00 a. m.  

  • bueno mano yö no presumo ke soy un buen editor pero lo ke si no me gusta es poner mucho codigo a la paginaS (es mas lo ke pones aki no es html sino java pero bueno) miren eso de poner barras de progreso en verdad es un lata, pero hize algo ke me parece bueno no se ke opinen es sencillo y es html no se los pedo explicar pero aki les dejo link de mi web para ke la vean
    www.manico.ws/inicio.html

    ya ke no se puede poner codigo html en esta cosa per ya ke
    si kiern el codigo denle a ver codigo fuente y listo sustituyen la direccion ke yo tengo y ponen la suya en el meta de redireccionamiento

    bueno me responden para ver ke les parece si tienen dudas escrubanme a pirata_linux35@hotmail.com

    Por Anonymous Anónimo, a las 6/08/2008 03:09:00 a. m.  

  • Hola, ¿alguien sería tan amable de enviarme el archivo .zip? No soy capaz de hacer que funcione con las indicaciones dadas en la página.

    Aquí os pongo mi dire: loquedigacristina@gmail.com

    Gracias!

    Por Blogger Cristina Cabanillas, a las 9/03/2008 11:00:00 a. m.  

  • hola quetal me podrias mandar el archivo a mi correo ya que el link no funciona mi correo es chimilo23@hotmail.com te lo voy agrader mucho gracias

    Por Blogger Enrique Reyes, a las 10/23/2009 06:47:00 p. m.  

  • porfa enviame el archivo zip, zisgo26@gmail.com

    Por Anonymous Anónimo, a las 1/12/2010 03:23:00 p. m.  

  • Holaaaa...

    me podeis enviar el .zip, el enlace esta roto..

    jsvcv@yahoo.es

    Por Anonymous Anónimo, a las 7/12/2010 02:00:00 p. m.  

  • ENLACE ROTOOOOOOOOOO pero lo estan reportando desde hace ya 6 años y nada !!!!!

    Por Anonymous Anónimo, a las 12/27/2012 09:02:00 p. m.  

Publicar un comentario

<< Inicio