HTML
Elemento de progreso
Buscar..
Parámetros
| Parámetro | Valor |
|---|---|
| max | ¿Cuánto trabajo requiere la tarea en total? |
| valor | ¿Cuánto del trabajo ya se ha realizado? |
| posición | Este atributo devuelve la posición actual del elemento <progress> |
| etiquetas | Este atributo devuelve una lista de etiquetas de elemento <progress> (si las hay) |
Observaciones
El elemento <progress> no es compatible con versiones de Internet Explorer de menos de 10
El elemento <progress> es el elemento incorrecto que se utiliza para algo que es solo un indicador, en lugar del progreso de la tarea. Por ejemplo, mostrar el uso del espacio en disco utilizando el elemento <progress> es inapropiado. En su lugar, el elemento <meter> está disponible para este tipo de casos de uso.
Progreso
El elemento <progress> es nuevo en HTML5 y se utiliza para representar el progreso de una tarea
<progress value="22" max="100"></progress>
Esto crea una barra llena de 22%.
Cambiando el color de una barra de progreso.
Las barras de progreso se pueden diseñar con el selector de progress[value] .
Este ejemplo da una barra de progreso una anchura de 250px y una altura de 20px
progress[value] {
width: 250px;
height: 20px;
}
Las barras de progreso pueden ser especialmente difíciles de diseñar.
Chrome / Safari / Opera
Estos navegadores utilizan el -webkit-appearance para dar estilo a la etiqueta de progreso. Para anular esto, podemos restablecer la apariencia.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Ahora, podemos estilizar el propio contenedor.
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Firefox
Firefox le da un estilo diferente a la barra de progreso. Tenemos que usar estos estilos.
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
explorador de Internet
Internet Explorer 10+ admite el elemento de progress . Sin embargo, no admite la propiedad de background-color . Tendrá que usar la propiedad de color en su lugar.
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
HTML Fallback
Para los navegadores que no admiten el elemento de progress , puede usar esto como solución alternativa.
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
Los navegadores que admiten la etiqueta de progreso ignorarán el div anidado en el interior. Los navegadores heredados que no pueden identificar la etiqueta de progreso mostrarán el div en su lugar.