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):

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.

Si deseamos editar código HTML, podremos recurrir a un editor, entre los que podemos destacar Visual Studio Code.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.