Como fazer uma barra de progresso com CSS

Vamos aprender neste artigo como fazer uma barra de progresso com CSS puro, sem utilizar qualquer recurso externo e de uma forma simples.

Fala programador(a), beleza? Bora aprender mais sobre CSS!

Geralmente quando temos uma tarefa de um componente complexo, como uma barra de progresso ou barra de loading, apelamos direto para soluções prontas

Porém para a nossa a alegria, é possível chegar em resultados excelentes apenas com CSS

Para criar uma barra de carregamento com CSS, vamos precisar de uma animation e trabalhar com keyframes

Que são recursos de animação do CSS3, vamos ver um exemplo na prática:

<div class="container">
    <div class="progress-bar"></div>
</div>

Este será o nosso HTML, o container será o recipiente da barra, ou seja, a parte que ainda não está carregada do loading

E o progress-bar, é a barra que vai carregar com o tempo

Veja o CSS:

.container {
    height: 25px;
    background-color: #CCC;
    position: relative;
}

.container .progress-bar{
   position: absolute;
   height: 100%;
   background-color: #0fd439;
   animation: progress-animation 5s infinite;
}


@keyframes progress-animation{
    0% { width: 0%; } 
    100% { width: 100%}
}

Aqui determinamos uma área para o container, ele será o recipiente do loader, e definimos o estilo da barra de progresso em progress-bar, que é basicamente uma cor de fundo e uma altura de 100% do container inicial

Então definimos uma animation, que será de progresso e vai durar 5s, de forma infinita

E atribuímos um keyframe a ela, que coordenara o progresso da barra de carregamento

Veja o resultado:

Conclusão

Neste artigo vimos como fazer barra de progresso com CSS

Utilizamos um recurso de CSS3 chamado animation, aliado aos keyframes que coordenam a animação

Assim atingimos o objetivo de criar uma barra de loading com CSS puro

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube