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).
1 Comment
Onde está o id do scrip em javascritp que faz isso funcionar?