Tutoriais

https://vvcestudio.com.br/pt/tutorial/html/meterprogress
menu

HTML Meter e Progress

Medidor (Meter) :
A tag meter define uma medida escalar dentro de um intervalo conhecido ou de um valor fracionário. Isso também é conhecido como medidor.
Exemplos: uso do disco, relevância de um resultado da consulta etc.
Nota: A tag meter não deve ser usada para indicar progresso (como em uma barra de progresso). Para barras de progresso, use a tag progress.
Dica: sempre adicione a tag label para obter as melhores práticas de acessibilidade!

Progresso (Progress) :
O elemento HTML progress progress é usado para visualizar o progresso de uma tarefa.
Embora as especificidades de como é mostrado ficam a cargo do desenvolvedor, tipicamente, é mostrado como uma barra de progresso.

Segue exemplos de Meter e Progress




Barra de Progresso (Progress) : 80%
codigo HTML
x
<label for="visitm">Visitas no mês:</label>
<meter id="visitm" min="0" optimum="6" high="8" max="10" value="2" ></meter><br />
<label for="visitd">Visitas por dia:</label>
<meter id="visitd" min="0" optimum="5" high="8" max="10" value="6" ></meter><br />
<label for="visita">Visitas no ano:</label>
<meter id="visita" min="0" optimum="6" high="8" max="10" value="9" ></meter><br />
Barra de Progresso (Progress) : 80% <br />
<progress max="100" value="80"></progress>