jueves, 30 de septiembre de 2010

Barra de progreso (cargando) HTML5

Funciona en:
Para hacer aparecer una barra de progreso (progress bar y también loading) en HTML 5 és muy simple, solo hay que abrir el tag PROGRESS. En progress hay que darle un valor (value) que és por donde va la barra de progreso y un max (maximo). A continuación un simple ejemplo:
Ejemplos visuales (solo se ve en Chrome):
= 10%
= 20%
= 30%
= 40%
= 50%
= 60%
= 70%
= 80%
= 90%
= 100%
Para hacer que avancen, el dato value tendría que ser una variable. Por ejemplo integrar el php en el value.

9 comentarios:

  1. Interesante etiqueta, aunque no logro entender como se podría integrar el php en value. ¿value="codigo php"?

    ResponderEliminar
  2. Reescribo comentario, el original se perdio por accidente:

    LuisDark el value debería ser algo así:
    value = "«?php echo $variable; ?»"

    corregirme si me equivoco, gracias.

    ResponderEliminar
  3. Curiosamente solo lo veo en firefox pero en chrome no. ¿Te importaria indicar, en un formulario en el que hay que subir un archivo, si esto serviria para mostrar el progreso de carga?

    ResponderEliminar
  4. En un principio si que serviría ya que modificamos el VALUE a nuestro gusto, pero no sería tan simple supongo que deberías buscar información de como hacerlo con Ajax, ya que la pagina necesitaría estar en refresco constante para marcar por que % va el Upload.

    Siento no poderte ayudar más, hace falta leer mucho más para lograr algo así.

    Gracias igualmente!

    ResponderEliminar
  5. y entonces en el html, como se haría?

    ResponderEliminar
    Respuestas
    1. En Html no se puede hacer Upload con barra de progreso sin utilizar otro lenguaje.
      Para subir un un archivo con HTML sería através de un formulaio utilizando el Input Type="file"

      Muchas gracias!

      Eliminar
  6. en vez de ponerlo en una imagen podias haberlo escito para que se pueda copiar las lineas directamente.

    ResponderEliminar
    Respuestas
    1. Disculpa hace años de este post. Igualmente es una linea. Gracias

      Eliminar
  7. kisiera hacer que al terminar la barra de progreso se abra algun archivo, en html, como puedo hacerlo?

    ResponderEliminar