Baseline Widely available
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.
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
label {
padding-right: 10px;
font-size: 1rem;
}
HTMLProgressElement
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.
<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 Compatibilidad con navegadores Mira tambiénRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4