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