Progress e meter

O elemento progress

O elemento <progress> é usado para representar o progresso de uma tarefa. Geralmente, é renderizado como uma barra de progresso. O atributo max é usado para indicar o valor máximo que representa o cumprimento da tarefa. Por padrão, ele é 1. O atributo value especifica quanto da tarefa foi feita em relação ao máximo. Deve ser um valor entre 0 e o valor máximo. Veja um exemplo de criação do elemento <progress>:

<progress value="40" max="100"></progress>

Você pode usar isso para representar o progresso de um projeto, por exemplo.

O elemento meter

Uma barra meter representa um valor fixo em um intervalo delimitado por valores min e max. Além desses valores, também devem ser fornecidos os atributos low e high. O valor low é o limite máximo para valores baixos. Já o valor high é o valor inicial de valores considerados altos. Há também o atributo optimum, que define um valor considerado ideal.

A barra do elemento <meter> pode ser dividida em 3 partes:

• lower: representa a parte da barra que tem os valores considerados baixos. Vai do valor do atributo min até o valor do atributo low.
• medium: representa os valores que estão na média. Vai do sucessor do low até o high.
• higher: é composto pelos valores altos. Vai do sucessor do high até o max.

A aparência da barra depende do valor do atributo value, do atributo optimum e dos intervalos de valores das partes citadas acima. Se o value estiver na parte que tiver os valores ideais, a barra será verde. Se o valor estiver na parte dos valores medianos, ela será amarela. Se estiver na parte dos valores ruins, ela será vermelha. E, o que determina se uma parte tem valores ideais, medianos ou ruins? Uma relação entre o valor optimum e os intervalos de valores citados:

• Se o valor optimum estiver na parte lower, os valores dessa parte serão os ideais, os valores da parte medium serão medianos, e os valores da parte higher serão ruins.
• Se o valor optimum estiver na parte medium, os valores dessa parte serão os ideais, e os valores da parte lower e higher serão medianos.
• Se o valor optimum estiver na parte higher, os valores dessa parte serão os ideais, os valores da parte medium serão medianos, e os valores da parte lower serão ruins.

Confuso? Para simplificar, você pode pensar assim: a parte onde o valor optimum está sempre terá os valores ideais. As outras partes serão medianas se estiverem ao lado dela. Caso contrário, elas serão ruins.

Veja um exemplo do elemento <meter>, que pode ser usado para representar, por exemplo, quantos GB da franquia de dados já foram usados:

<meter min="0" max="150" value="80" low="30" high="100" optimum="0">80</meter>

Note que o valor foi colocado tanto no atributo value, como também no conteúdo do elemento. Isso é porque ele é um fallback para browsers que não suportam o elemento e também porque é mais amigável para leitores de tela.