El avance de HTML5 nos trae nuevas características que podremos comenzar a implementar en nuestros proyectos. Un elemento que se agrega en HTML5 es progress. ¿Para que sirve? En palabras sencillas podríamos decir que 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>

Como podemos ver el uso del elemento Progress de HTML5 es muy simple. Solo debemos incluir la etiqueta html <progress> y establecer los atributos value y max con valores numéricos del 0 al 100.

Esto nos dará el siguiente resultado en los navegadores compatibles:

Consideraciones finales

Las ventajas de este elemento pueden resultar muy interesantes, aunque tendremos que considerar dos aspectos fundamentales: funcionalidad y compatibilidad.

Para hacer interesante esta elemento será necesario que lo integremos con nuestra aplicación, ya sea con JavaScript o mediante alguna tecnología del lado servidor. Esta parte es clave para que tenga mayor sentido incluir este elemento en nuestros proyectos web.

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

Resulta muy importante señalar que en el apartado compatibilidad, aún queda un camino por recorrer. Para saber más sobre la compatibilidad del elemento Progress de HTML5 podemos consultar las tablas que nos ofrece el sitio Caniuse.