We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Introducido en HTML5

Sumario

La etiqueta HTML <progress> se utiliza para visualizar el progreso de una tarea. Aunque los detalles de como se muestran depende directamente del navegador que utiliza el cliente, aunque básicamente aparece una barra de progreso.

Atributos

Este elemento incluye Atributos Globales.

max
Este atributo indica la cantidad de trabajo que demorá la carga, se define en el elemento progress. Por ejemplo max="100".
value
 
Este atributo indica que parte de la tarea ya se ha completado o cargado. Debe especificarse un valor entre 0  y max, o entre 0 y 1.0 si max está omitido. Si al atributo value no se le especifica ningún valor, se estara llevando a cabo la tarea sin que el elemento mueste funcionamiento alguno. Por ejemplo si la carga está al 50% será de 0.5 el valor, en el caso de no especificar max. 

Puedes usar la propiedad CSS orient permite especificar la orientacion de la barra de progreso (horizontal o vertical) con horizontal por defecto. La pseudo-clase :indeterminate se puede utiliza para hacer que coincida con las barras de progreso indeterminadas.

Ejemplo

<progress value="70" max="100">70 %</progress>

Resultado

En Mac OS X, Se vería como esto:

progress-1.png

En Windows, el resultante sería este:

progress-firefox.JPG

Ejemplos adicionales

Mira orient.

Especificaciones

Especificación Status Comment
HTML Living Standard
La definición de '<progress>' en esta especificación.
Living Standard  
HTML5
La definición de '<progress>' en esta especificación.
Recommendation

Compatibilidad en los navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 6.0 6.0 (6.0) [1][2] 10 11.0 5.2
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Sin soporte 6.0 (6.0) [1][2] Sin soporte 11.0 Sin soporte

Gecko notas

[1] Gecko provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.

[2] Prior to Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.

Mira también

Etiquetas y colaboradores del documento

Colaboradores en esta página: teoli, rubencidlara
Última actualización por: teoli,