Los elementos progress y meter forman parte de HTML5 y permiten medir los datos de alguna manera. Pero hay una diferencia entre estos 2. El elemento progress se usa para describir el estado actual de un proceso cambiante destinado a completarse. Sin embargo, meter representa un elemento con un rango conocido o un valor fraccional.
Elemento progress
El elemento progress puede tener un atributo max para indicar cuando la tarea estará completa, y un value para indicar el estado actual de la tarea. Ambos son opcionales.
|
1 2 |
<h1>Progreso</h1> <p>Estado: <progress min="0" max="100" value="15"></progress></p> |
Elemento progress
Este elemento está hecho para cambiar dinámicamente el valor del progreso, usando javascript o jquery.
Elemento meter
El elemento meter tiene 6 atributos. Además del min, max y value, tiene los atributos high, low y optimum.
El min y el max establecen el minimo y el máximo dentro de un rango mientras value indica la medida actual. Los atributos low e high indican en un umbral lo que es considerado lo más alto y lo más bajo. Por ejemplo, en un rango de 0 a 100 como mínimo y máximo respectivamente, lo que esté por debajo de 40 es bajo y lo que esté por encima de 75 es alto. El atributo optimum se refiere al valor ideal, en el ejemplo anterior podría ser 95.
|
1 2 3 |
<h1>Uso del disco</h1> <p>Total de espacio usado: <meter value="80" min="0" max="320" ➥low="10" high="300" title="gigabytes"></meter> |
Elemento meter
Aquí finaliza el post de hoy. Más adelante hablaré de como personalizar las barras. A seguir picando código 🙂