Como estilizar barra de progresso em CSS com animação

Nesse artigo você verá como estilizar uma barra de progresso em CSS, similar àquelas de sistemas operacionais e softwares em geral. Listrada e colorida, ela pode ainda ser animada através da regra animation, e é bem fácil reutilizar em qualquer lugar do seu site depois de inserir as regras em sua folha de estilos.

Note que apenas a parte de estilização, e não a de programação, é coberta aqui. Para definir o quanto as barras estarão cheias durante algum carregamento, dependerá de qual uso fará delas, e normalmente isso é conseguido com JavaScript, jQuery, PHP, etc. Por enquanto, o importante é saber que o segredo estará na propriedade “width” da div “progresso-barra”, que forma a barra.

Vejamos a estrutura da barra:

<div class="progresso progresso-pai">
     <div class="progresso-barra"></div>
</div>

É bem simples: a primeira div forma o fundo da barra quando vazia, com um tom cinza. A outra, de dentro, conterá a porcentagem cheia e preenchida.

Veja no exemplo que há uma barra estática e outra animada (não no print acima, lá na página de exemplo!). Isso é facilmente criado com a atribuição de uma classe à div pai, que podemos chamar de “ativa”. Ou seja: uma barra ativa tem animação, e sem a classe estará estática. Ficaria assim a div ativa (em movimento):

<div class="progresso progresso-pai ativa">
	<div class="progresso-barra"></div>
</div>

Com isso podemos dizer via estilos: “se a barra pai está ativa, a barra de progresso será animada.

A estilização: pra começar, a regra keyframe, que cria elementos animados a partir de vários estilos como posição, cor, etc. No nosso caso, serão usadas as cores mesmo.

Adicione à sua folha de estilos:

/* efeitos de animação */
@-webkit-keyframes listras-anim {
from {background-position:40px 0}
to {background-position:0 0}
}
@-moz-keyframes listras-anim {
from {background-position:40px 0}
to {background-position:0 0}
}
@-o-keyframes listras-anim {
from {background-position:40px 0}
to {background-position:0 0}
}
@keyframes listras-anim {
from {background-position:40px 0}
to {background-position:0 0}
}

Está definido que o elemento “listras-anim” será animado. Agora o estilo que liga a animação a quem receberá o estilo – a barra de progresso:

.progresso.ativa .progresso-barra {
	-webkit-animation: listras-anim 2s linear infinite;
	-moz-animation: listras-anim 2s linear infinite;
	-ms-animation: listras-anim 2s linear infinite;
	-o-animation: listras-anim 2s linear infinite;
	animation: listras-anim 2s linear infinite
}

Definimos que quando a div “progresso” tiver a classe “ativa”, sua barra “filha”, que tem a classe “progresso-barra” será animada conforme definido antes, em 2 segundos, movimento linear e em looping infinito.

Agora o resto da estilização:

.progresso {
	overflow: hidden;
	height: 15px;
	background-color: #e7e7e7;
	padding: 1px;
	box-shadow: inset -1px -1px 18px #CECECE, inset 0 -1px 0 #CECECE
}

A barra “pai”, que segura a menor animada e colorida. Ela é cinza (para aparentar que está vazia) e tem alguns enfeites, como sombra. Só é visível quando a barra animada tiver menos de 100% de largura.

.progresso-barra {
	width: 100%;
	height: 15px;
	background-color: #428bca;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	-webkit-transition: width .6s ease;
	transition: width .6s ease
}

A barra colorida que indica o tanto “cheio”. Pode ser animada ou não, desde que tenha a classe “ativa”. Note que essa do exemplo tem “width:100%”, então será uma barra toda cheia. A “background-color” define a cor da barra.

.progresso-pai .progresso-barra {
	background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255,255,255,.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255,255,255,.15)), color-stop(0.75, rgba(255,255,255,.15)), color-stop(0.75, transparent), to(transparent));
	background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,.15)25%, transparent 25%, transparent 50%, rgba(255,255,255,.15)50%, rgba(255,255,255,.15)75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(45deg, rgba(255,255,255,.15)25%, transparent 25%, transparent 50%, rgba(255,255,255,.15)50%, rgba(255,255,255,.15)75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255,255,255,.15)25%, transparent 25%, transparent 50%, rgba(255,255,255,.15)50%, rgba(255,255,255,.15)75%, transparent 75%, transparent);
	background-size: 40px 40px
}

A parte listrada da barra, usa “linear-gradient” de CSS para criar o efeito.

Isso já é o bastante para ter uma barra completa. Mas vamos ver outro modelo, com outra cor e menor: é só adicionar algumas classes para uma barra menor, com digamos, 75% do preenchimento total. Altere o código anterior.

.progresso-pai .progresso-barra, .progresso-pai .progresso-barra-75 {
	background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255,255,255,.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255,255,255,.15)), color-stop(0.75, rgba(255,255,255,.15)), color-stop(0.75, transparent), to(transparent));
	background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,.15)25%, transparent 25%, transparent 50%, rgba(255,255,255,.15)50%, rgba(255,255,255,.15)75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(45deg, rgba(255,255,255,.15)25%, transparent 25%, transparent 50%, rgba(255,255,255,.15)50%, rgba(255,255,255,.15)75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255,255,255,.15)25%, transparent 25%, transparent 50%, rgba(255,255,255,.15)50%, rgba(255,255,255,.15)75%, transparent 75%, transparent);
	background-size: 40px 40px
}
.progresso.ativa .progresso-barra, .progresso.ativa .progresso-barra-75 {
	-webkit-animation: listras-anim 2s linear infinite;
	-moz-animation: listras-anim 2s linear infinite;
	-ms-animation: listras-anim 2s linear infinite;
	-o-animation: listras-anim 2s linear infinite;
	animation: listras-anim 2s linear infinite
}

Entrou ali uma nova classe “progresso-barra-75”. Adicione também o estilo:

.progresso-barra-75 {
	width: 75%;
	height: 15px;
	background-color:#093;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	-webkit-transition: width .6s ease;
	transition: width .6s ease
}

E use a marcação:

<div class="progresso progresso-pai">
	<div class="progresso-barra-75"></div>
</div>
    
<div class="progresso progresso-pai ativa">
	<div class="progresso-barra-75"></div>
</div>

Para ter duas barras verdes, uma animada e outra estática. Acho que é o suficiente pra você ter uma boa base para criar as suas. Se quiser, baixe os arquivos de exemplo aqui (3KB).