HTML Meter e Progress
Meter :
The meter tag defines a scalar measurement within a known range or fractional value. This is also known as the gauge.
Examples: disk usage, relevance of a query result, etc.
Note: The meter tag should not be used to indicate progress (as in a progress bar). For progress bars, use the progress tag.
Tip: Always add the label tag for accessibility best practices!
Progress :
The progress progress HTML element is used to visualize the progress of a task.
Although the specifics of how it is displayed are up to the developer, typically it is shown as a progress bar.
Below are examples of Meter and Progress
Barra de Progresso (Progress) : 80%
HTML code:
x
<label for="visitm">Visits per month:</label>
<meter id="visitm" min="0" optimum="6" high="8" max="10" value="2" ></meter><br />
<label for="visitd">Visits per day:</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>
<meter id="visitm" min="0" optimum="6" high="8" max="10" value="2" ></meter><br />
<label for="visitd">Visits per day:</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>