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.htmle 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.
