Implementação de tags de marcação
A marcação HTML5 trouxe muitas novidades para a web, e uma delas é a possibilidade de exibir barras de progresso e medidores de forma nativa, sem a necessidade de utilizar bibliotecas ou plugins externos. Isso é possível graças às tags
Tag
A tag
Para utilizar a tag
<progress value="50" max="100"></progress>
Nesse exemplo, a barra de progresso está com 50% de progresso, já que o valor atual é 50 e o valor máximo é 100. O resultado visual será uma barra preenchida até a metade.
Além disso, é possível adicionar um texto que indique o progresso da tarefa, utilizando a tag dentro da tag
<progress value="50" max="100"><span>50%</span></progress>
Nesse caso, o texto “50%” será exibido dentro da barra de progresso, indicando o progresso da tarefa.
Tag
A tag
Para utilizar a tag
<meter value="50" min="0" max="100"></meter>
Nesse exemplo, o medidor está com 50% de preenchimento, já que o valor atual é 50, o valor mínimo é 0 e o valor máximo é 100. O resultado visual será um medidor preenchido até a metade.
Assim como na tag
<meter value="50" min="0" max="100"><span>50/100</span></meter>
Nesse caso, o texto “50/100” será exibido dentro do medidor, indicando o valor atual e o valor máximo do medidor.
Exemplos de código
A seguir, serão apresentados alguns exemplos de código que utilizam as tags
Exemplo 1: Barra de progresso com texto
<progress value="75" max="100"><span>75% concluído</span></progress>
Nesse exemplo, a barra de progresso está com 75% de progresso, e o texto “75% concluído” é exibido dentro da barra.
Exemplo 2: Medidor de bateria
<meter value="80" min="0" max="100"><span>80/100</span></meter>
Nesse exemplo, o medidor indica que a bateria está com 80% de carga, e o texto “80/100” é exibido dentro do medidor.
Exemplo 3: Barra de progresso animada
<progress value="0" max="100" id="barra"></progress>
<script>
var barra = document.getElementById("barra");
var valor = 0;
var intervalo = setInterval(function() {
valor++;
barra.value = valor;
if (valor == 100) {
clearInterval(intervalo);
}
}, 50);
</script>
Nesse exemplo, a barra de progresso começa vazia e é preenchida gradualmente até atingir 100%. Isso é feito utilizando JavaScript para alterar o valor da barra de progresso a cada intervalo de tempo.
Conclusão
A utilização das tags