Implementação de tags de marcação e para exibir barras de progresso e medidores

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 e , que permitem a criação de elementos visuais para indicar o progresso de uma tarefa ou o nível de um valor.

Tag

A tag é utilizada para criar uma barra de progresso que indica o andamento de uma tarefa. Ela pode ser utilizada em diversas situações, como no carregamento de uma página, no upload de um arquivo, na execução de um script, entre outras.

Para utilizar a tag , basta definir o valor atual e o valor máximo da barra de progresso, utilizando os atributos “value” e “max”, respectivamente. Por exemplo:

    <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 . Por exemplo:

    <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 é utilizada para criar um medidor que indica o nível de um valor. Ela pode ser utilizada em diversas situações, como para indicar o nível de bateria de um dispositivo, o espaço livre em um disco, entre outras.

Para utilizar a tag , basta definir o valor atual, o valor mínimo e o valor máximo do medidor, utilizando os atributos “value”, “min” e “max”, respectivamente. Por exemplo:

    <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 , é possível adicionar um texto que indique o valor do medidor, utilizando a tag dentro da tag . Por exemplo:

    <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 e para exibir barras de progresso e medidores.

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 e é uma forma simples e eficiente de exibir barras de progresso e medidores na web. Além de serem nativas do HTML5, elas permitem a personalização do visual e a adição de texto para indicar o progresso ou o valor do medidor. Com essas tags, é possível melhorar a experiência do usuário ao indicar o andamento de uma tarefa ou o nível de um valor.