Exemplo de Tag de Progresso em HTML

Introdução

A tag HTML <progress> é usada para indicar o progresso de uma tarefa. Ela é tipicamente utilizada para exibir uma barra de progresso para uma tarefa dentro de uma página web HTML. Neste laboratório, você aprenderá como criar uma barra de progresso básica usando a tag HTML <progress>.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criar a Estrutura HTML

Primeiramente, crie a estrutura HTML básica para a barra de progresso usando o seguinte código no arquivo index.html:

<!doctype html>
<html>
  <head>
    <title>HTML Progress Tag Example</title>
  </head>
  <body>
    <h1>HTML Progress Tag</h1>
    <label for="progress-bar">Task Progress:</label>
    <progress id="progress-bar" max="100"></progress>
  </body>
</html>

Neste código, incluímos as tags necessárias para criar uma página HTML, uma tag de cabeçalho para o título da página, uma tag de rótulo (label) para descrever nossa barra de progresso e a tag <progress> com um atributo id de "progress-bar" e um atributo max de 100.

Definir o Valor da Barra de Progresso

Para definir o valor da barra de progresso, adicione o atributo value à tag progress com um valor entre 0 e 100. Por exemplo, para definir a barra de progresso para 50%, adicione o seguinte código após a tag <progress>:

<progress id="progress-bar" max="100" value="50"></progress>

Adicionando JavaScript para Atualizar a Barra de Progresso

Para atualizar a barra de progresso dinamicamente, adicionaremos um pouco de JavaScript para alterar o atributo value da tag progress.

Adicione o seguinte código JavaScript ao arquivo HTML:

<script>
  let progressBar = document.getElementById("progress-bar");
  let percent = 0;

  function updateProgress() {
    if (percent == 100) {
      clearInterval(intervalId);
      return;
    }
    progressBar.value = percent;
    percent++;
  }

  let intervalId = setInterval(updateProgress, 100);
</script>

Neste código, criamos uma função chamada updateProgress() que atualiza o valor da barra de progresso a cada 100 milissegundos. A função verifica se a barra de progresso está em 100% e para o intervalo se estiver.

Finalmente, definimos o intervalo chamando setInterval() com nossa função updateProgress() e um intervalo de tempo de 100 milissegundos.

Salve o arquivo index.html e abra-o em um navegador web. Você deve agora ver uma barra de progresso que aumenta em valor ao longo do tempo até atingir 100%.

Resumo

Seguindo os passos acima, você aprendeu como criar uma barra de progresso básica usando a tag <progress> em HTML. Adicionalmente, você aprendeu como atualizar a barra de progresso dinamicamente usando JavaScript. Essa técnica pode ser útil para exibir o progresso de uma tarefa de longa duração ou para indicar o progresso de um upload de arquivo.

Progresso da Tarefa em HTML

Introdução

Criar a Estrutura HTML

Definir o Valor da Barra de Progresso

Adicionando JavaScript para Atualizar a Barra de Progresso

Resumo