Como criar e trabalhar com elementos HTML e JavaScript de barra de progresso

Para criar uma barra de progresso em HTML, você pode usar a tag <progress>. Veja um exemplo simples:

<progress value="50" max="100"></progress>

Neste exemplo, a barra de progresso tem um valor atual de 50 e um valor máximo de 100.

Você pode estilizar a barra de progresso usando CSS. Aqui está um exemplo de como você pode mudar a cor da barra de progresso:

progress {
  width: 200px;
}

progress::-webkit-progress-value {
  background-color: green;
}

progress::-moz-progress-bar {
  background-color: green;
}

Neste exemplo, definimos o comprimento da barra de progresso como 200 pixels e alteramos a cor da barra de progresso para verde usando seletores CSS específicos para navegadores diferentes.

Para atualizar dinamicamente o valor da barra de progresso, você pode usar JavaScript para modificar o valor do atributo value da tag <progress>. Por exemplo:

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

<button onclick="updateProgressBar()">Atualizar</button>

<script>
function updateProgressBar() {
  var progressBar = document.getElementById("progress-bar");
  progressBar.value += 10; // aumenta o valor da barra de progresso em 10%
}
</script>

Neste exemplo, adicionamos um botão que, quando clicado, chama uma função JavaScript que aumenta o valor da barra de progresso em 10%. O elemento <progress> é selecionado por seu ID usando o método document.getElementById().

Deixe um comentário Cancelar resposta