Criando uma Barra de Progresso com HTML, CSS e JavaScript – Blog – Devdata Sistemas

As barras de progresso são úteis em diversas aplicações, como acompanhar carregamentos, indicar o tempo restante de uma tarefa ou até criar animações interativas em sua página. Neste tutorial, vamos criar uma barra de progresso que diminui gradativamente ao longo de um período definido.

Estrutura HTML

Começamos criando a estrutura básica da barra de progresso:

<div id="progressBar">
    <div id="progressBarFilled"></div>
</div>

Estilização CSS

O CSS define o estilo da barra de progresso e o comportamento inicial:

#progressBar {
    width: 100%;
    height: 5px;
    background-color: #ddd;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

#progressBarFilled {
    height: 100%;
    background-color: red;
    width: 100%; /* Começa completamente preenchido */
    transition: width linear; /* Animação linear da largura */
}

Lógica com JavaScript

Usamos JavaScript para controlar o tempo da animação e fazer a barra diminuir gradativamente:

// Executa quando a página estiver carregada
document.addEventListener("DOMContentLoaded", function () {
    const progressBar = document.getElementById("progressBarFilled");

    // Tempo total da animação em milissegundos (5 minutos neste exemplo)
    const animationTime = 5 * 60 * 1000; // 300000ms

    // Configura a duração da transição
    progressBar.style.transitionDuration = `${animationTime}ms`;

    // Reduz a largura para 0%
    setTimeout(() => {
        progressBar.style.width = "0%";
    }, 100); // Pequeno atraso para garantir que a transição funcione
});

Como Funciona

HTML: Define o container externo (progressBar) e a barra preenchida interna (progressBarFilled).
CSS: Define o estilo inicial e a animação linear baseada em largura.
JavaScript: Controla o tempo da animação com transitionDuration e reduz gradualmente a largura da barra até 0%.

Personalização

Cores: Modifique background-color em progressBar e progressBarFilled para combinar com o estilo do seu projeto.
Altura da Barra: Altere o valor de height em ambos os elementos.
Tempo da Animação: Ajuste o valor de animationTime no JavaScript.

Exemplo Completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barra de Progresso</title>
    <style>
        #progressBar {
            width: 100%;
            height: 5px;
            background-color: #ddd;
            position: relative;
            overflow: hidden;
            margin-bottom: 15px;
        }

        #progressBarFilled {
            height: 100%;
            background-color: red;
            width: 100%;
            transition: width linear;
        }
    </style>
</head>
<body>
    <div id="progressBar">
        <div id="progressBarFilled"></div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const progressBar = document.getElementById("progressBarFilled");

            const animationTime = 5 * 60 * 1000; // 5 minutos

            progressBar.style.transitionDuration = `${animationTime}ms`;

            setTimeout(() => {
                progressBar.style.width = "0%";
            }, 100);
        });
    </script>
</body>
</html>

Com isso, você tem uma barra de progresso totalmente funcional e personalizável que diminui gradativamente. Teste em seu projeto e veja como ela se adapta às suas necessidades! 🚀