El elemento progress de HTML5

Un interesante elemento que se agrega en HTML5 es progress. ¿Para que sirve? Es lo que se conoce como una barra de progreso.

En este elemento es importante destacar que para que esta etiqueta sea eficaz, deberemos incluir los atributos max (el total al que podrá llegar la barra) y el atributo value (el lugar donde se encuentra el progreso). Veamos un ejemplo a continuación para comprender mejor como funciona:

<progress value="85" max="100">Si ves esto es porque tu navegador no soporta este elemento</progress>

Esto nos dará el siguiente resultado en los navegadores compatibles (Chrome, Firefox y Opera):

Si ves esto es porque tu navegador no soporta este elemento

Claro que para hacer interesante esta elemento será necesario que lo integremos con nuestra aplicación, ya sea con AJAX o mediante alguna tecnología del lado servidor.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

4 Comentarios en “El elemento progress de HTML5
  1. raymon dice:

    este es d mucha ayuda

  2. Sergio dice:

    Me ayudas con un ejemplo usando Ajax?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.