Como usar el elemento Progress de HTML5

Como ya sabemos HTML5 ha introducido una gran cantidad de elementos muy útiles que podemos utilizar en cualquier tipo de proyecto online, muchos de ellos los podemos utilizar para crear componentes de interfaz de usuario (UI) y también adaptar a cualquier requerimiento. Entre ellos esta el elementos <progress>.
En este post vamos a ver como usarlo en su forma básica y también como aplicarle estilos a este elemento. Las formas básicas de usos para este elemento son: mostrar el progreso al momento que el usuario realiza una tarea, Eje: rellenar un formulario o también para mostrar los resultados de una medición o calculo.

El elemento <Progress>

El elemento <progress> nos ofrece una manera muy fácil y rápida de crear barras de progreso que muestran movimiento hacia un objetivo fijado, igual a la que vemos cuando cargamos alguna aplicación de datos o instalamos un software.

Su uso es muy básico y fácil de entender.

Del código anteriores obtenemos la siguiente barra de progreso.
elemento-progress-html5

Hay dos atributos básicos que debemos especificar a este elemento.  value y max, el atributo max especifica la cantidad de trabajo que se requiere en total y el atributo value especifica que porcentaje se ha completado hasta el momento.

El navegador lo que hace es calcular  el porcentaje del trabajo que se ha completado (value) y ajustar la longitud de la barra de progreso en consecuencia y mostrar el resultado graficamente.

utilizar-elemento-progress-de-html5

También mostrar el progreso entre 0 y 1, utilizando el atributo de value para mostrar la posición actual:

Aquí tendriamos la barra con la mitad del valor alcanzado.

Este elemento progress  acepta los atributos globales de HTML (id, style, title, dir, class..etc.) y  es soportado por los principales navegadores y en Iexplorer desde la versión 10.

Aplicando CSS al Elemento Progress

Podemos aplicar estilo personalizado a este elemento <progress> utilizando las pseudo-clases. Pero debemos de saber que estas clases varían ligeramente entre los diferentes navegadores.

Lo primero que hacemos es eliminar los estilo predeterminado que aplica el navegador. Esto lo hacemos mediante el establecimiento de las siguientes reglas.

En Chrome y Safari tenemos que utilizar la speudo-clase –webkit-progress-bar para aplicar estilos al fondo de la barra, es decir al elemento progress como tal. Y –webkit-progress-value para aplicar estilos a la barra que determina el valor del elemento.

y en Firefox solo utilizaremos la pseudo-clase –moz-progress-bar para aplicar el estilo al valor de la barra, solo cambiamos el sufijo del navegador, la barra solo con el nombre del elemento podemos aplicarle estilos.

Y así podemos aplicar los estilos que queramos y dar una apariencia mas completa a estos elementos de HTML5.

Utilizando clases para cada elemento, aplicando varios colores y utilizando otras etiquetas como label o div podemos crear formas descriptivas de algo, como por ejemplo el típico skill o habilidades de un portafolio pero esta vez con elementos de HTML5.

habilidades con elemento progress

Y esto es todo lo básico para este elemento <progress> de HTML5. Por supuesto, este elemento lo podemos llevar al limite con su uso, por ejemplo: combinándolo con JavaScript obtendremos buenos resultados. Pero quizás mas adelante veremos esto.

Mas información: MDN Element Progress  w3schools Tag Progress

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. Jesus dice:

    Muy bueno, no tenía idea de la existencia de este elemento y es muy simple