<progress>: Elemento indicador de progreso

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Pruébalo

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examplesand send us a pull request.

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

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

Resultado

Pruébalo

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

progress-1.png

En Windows, el resultante sería este:

progress-firefox.JPG

Especificaciones

Specification
HTML
# the-progress-element

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
progress
max
value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Mira también