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

0
3927

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.

barras de carregamento em css

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

- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui