<progress>: Elemento indicador de progreso
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 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
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
- Categorias de contenidoFlujo de contenido, contenido de redacción, contenido etiquetable, contenido palpable.
- Contenido permitido Contenido de redacción, pero no debe haber ningún elemento de progreso entre sus descendientes
- Etiquetas por omisión Ninguna, tanto la etiqueta inicial como la final son obligatorias.
- Elementos padres permitidos Cualquier elemento que acepte contenido de redacción.
- DOM interfaz
HTMLProgressElement
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 simaxestá omitido. Si al atributovalueno 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
Pruébalo
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
En Mac OS X, Se vería como esto:
En Windows, el resultante sería este:
Especificaciones
| Especificación |
|---|
| HTML # the-progress-element |