Criando Pré-Carregadores em CSS3

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Pré-carregadores são algo bastante comum no web design moderno. Como usuários, esperamos que a web seja rápida e fluida - não gostamos de esperar pelas coisas. Pré-carregadores oferecem uma resposta visual que indica que algum conteúdo está sendo carregado, adiministrando expectativas, reduz as chances dos usuários abandonarem seu site.

O Básico do CSS3 para a Criação de Pré-Carregadores

Antes de começarmos a construir nossa coleção de pré-carregadores, discutiremos algumas das características do CSS3 que são essenciais para a criação desse tipo de pré-carregadores

Os Pseudo-elementoss `:before` `:after`

Pseudo-elementos são bastante úteis na criação de pré-carregadores com CSS3. Eles criam um elemento falso antes ou depois do elemento HTML em questão.

“Pseudo é uma palavra que deriva do termo grego pseudēs, que significa falso.”

É o mesmo que criar um elemento que não existe, porém, passível de ser estilizado com CSS. Esses pseudo-elementos não são necessários para a criação de pré-carregadores com CSS3, mas facilitam bastante na hora de minimizar o código HTML.

Pseudo-elementos podem ser estilizados da mesma forma que você faria com qualquer outro elemento HTML, a única diferença é que você precisa especificar a propriedade content deles. Se não espicificá-la, o elemento não renderizará. A propriedade content pode conter qualquer texto que seja útil para o seu pré-carregador, como "Carregando...", entretanto, se não precisar de qualquer texto extra, você pode atribuir uma cadeia de caracteres vazia, para essa propriedade.

Animação em CSS3

Os pseudo-elementos do CSS são úteis, porém, não essenciais para a criação de pré-carregadores, contudo, a propriedade animation é. Sem ela, o pré-carregador falhará em ser animado e passaria a ser um simples adorno visual estático - algo não muito útil para indicar que algum conteúdo está em carregamento.

“O principal componente de animações em CSS é o @keyframes, a regra do CSS onde a animação é criada. Pense no @keyframes como estágios em uma linha do tempo. Dentro da @keyframes, você pode definir esses estágios, cada um com seus própriso estilos declarados.” - Uma introdução à Animação em CSS

Nota: antes de seguirmos para a demonstração, é importante atentar que os prefixos dos motores dos navegadores não estão inlusos nos trechos de códigos abaixo. Se precisar desses prefixos, por favor, veja os exemplos no codepen.

1. Onda de Áudio

A ideia por trás desse pré-carregador é criar uma animação equivalente a uma onda de áudio.

HTML

Ela é obtida através da criação de cinco elementos spans, cada um representando uma barra de áudio.

<div id="preloader_1">
        	<span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  		</div>

CSS

O efeito é obtido através da animação da altura de cada span, de 5px para 30px. A span também se movimenta para baixo no eixo Y em 15px, para dar o efeito de que está crescendo a partir do centro.

#preloader_1{
    position:relative;
}
#preloader_1 span{
	display:block;
	bottom:0px;
	width: 9px;
	height: 5px;
	background:#9b59b6;
	position:absolute;
    animation: preloader_1 1.5s	 infinite ease-in-out;
}

#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;

}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}

Por padrão, a animação em cada span acontece ao mesmo tempo. O efeito da Onda Mexicana é criado a partir da adição de um atraso, com a propriedade animation-delay, a cada span com um valor de 2 milisegundos. Cada span é selecionada através do uso do seletor nth-child().

2. Quadrado Circular

Esse pré-carregador usa quatro quadrados que se transformam, giram e mudam de cor até se tornarem círculos.

HTML

Ele é criado usando quatro spans; Cada um é um círculo/quadrado e possui sua própria animação.

<div id="preloader_2">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

Todos eles vão de quadrados até se transformarem em círculos, ajustando a propriedade border-radius de 0px (quadrado) para 20px (círulo).

#preloader_2{
position: relative;
left: 50%;
width: 40px;
height: 40px;
}
#preloader_2 span{
    display:block;
	bottom:0px;
	width: 20px;
	height: 20px;
	background:#9b59b6;
	position:absolute;
}
#preloader_2 span:nth-child(1){
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
animation: preloader_2_2 1.5s infinite ease-in-out;

}
#preloader_2 span:nth-child(3){
top:0px;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
animation: preloader_2_4 1.5s infinite ease-in-out;
}

@-keyframes preloader_2_1 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}


@-keyframes preloader_2_4 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}

Cada um também se movimenta nos eixos X & Y em direções opostas à sua posição atual. A cor de cada span também é animada e vai do púrpura até a cor definida para cada um. Isso dá a impressão de vários círculos fundindo em um único quadrado.

3. Formas Cruzadas

O pré-carregador de Formas Cruzadas é uma única div que utiliza os pseudo-elementos :before e :after que mencionamos anteriormente.

HTML

1	<div id="preloader_3"></div>

CSS

#preloader_3{
    position:relative;
}
#preloader_3:before{
	width:20px;
	height:20px;
	border-radius:20px;
	background:blue;
	content:'';
	position:absolute;
	background:#9b59b6;
	animation: preloader_3_before 1.5s infinite ease-in-out;
}

#preloader_3:after{
	width:20px;
	height:20px;
	border-radius:20px;
	background:blue;
	content:'';
	position:absolute;
	background:#2ecc71;
	left:22px;
	animation: preloader_3_after 1.5s infinite ease-in-out;
}

@keyframes preloader_3_before {
    0% {transform: translateX(0px) rotate(0deg)}
    50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
    0% {transform: translateX(0px)}
    50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
  	100% {transform: translateX(0px)}
}

Uma animação é criada para o pseudo-elemento #preloader_3:before e outra para o pseudo-elemento #preloader_3:after. Cada animação muda uma cor diferente em tempos distintos. De forma semelhante ao pré-carregador anterior, cada pseudo-elemento sai de um círculo e vira um quadrado, ao animar a propriedade border-radius.

4. A Cobra

A cobra é criada a partir de um conjunto de spans, onde cada um é estilizado de forma que virem um círculo.

HTML

Eis o código HTML, mas você poderia, facilmente, criar esse pré-carregador usando, apenas, três círculos, ao usar apenas #preloader_4 com os pseudo-elementos :before e :after.

<div id="preloader_4">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

A animação é criada ao mudar a posição Y de cada animação em -10px e mudar a cor do azul para o amarelo. Para criar o efeito de sombra, adicionamos um sombreamento a cada span que modifica sua sombra vertical de 0px para 20px.

#preloader_4{
    position:relative;
}
#preloader_4 span{
	position:absolute;
	width:20px;
	height:20px;
	background:#3498db;
	opacity:0.5;
border-radius:20px;
	-animation: preloader_4 1s infinite ease-in-out;

}
#preloader_4 span:nth-child(2){
	left:20px;
	animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
	left:40px;
	animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
	left:60px;
	animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
	left:80px;
	animation-delay: .8s;
}
@keyframes preloader_4 {
    0% {opacity: 0.3; transform:translateY(0px);    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
  	100%  {opacity: 0.3; transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}

Semelhante ao pré-carregador 1, ao adicionar animation-delay a cada span e atrasar cada uma delas em 2 milisegundos, cria-se o efeito de onda.

5. Disco Giratório

Esse é um disco.. que gira.

HTML

Usaremos uma única div para o círculo central e o pseudo-elemento :after para criar as linhas externas.

1	<div id="preloader5"></div>

CSS

Adicionando uma borda às partes superior e inferior, e atribuindo uma border-radius de 50px, criar-se duas linhas esternas. Adicionamos uma animação à div principal só para alterar sua cor, e criamos o efeito de rotação adicionando transform: rotate(). A animação do pseudo-elemento :after é adicionada para alterar a cor da borda externa.

#preloader5{
    position:relative;
	width:30px;
	height:30px;
	background:#3498db;
	border-radius:50px;
	animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
	position:absolute;
	width:50px;
	height:50px;
	border-top:10px solid #9b59b6;
	border-bottom:10px solid #9b59b6;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-radius:50px;
	content:'';
	top:-20px;
	left:-20px;
	animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);background:#2ecc71;}
    100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

6. Janela Brilhante

Nós incorporamos um pouco da Microsoft nessa daqui...

HTML

Esse pré-carregador é criado com uma div e quatro spans para cada quadrado.

 <div id="preloader6">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

Esse quadrados são posicionados na forma de grade. A animação é adicionada à div principal para rotacionar todo o pré-carregador. Outra animação é adicionada às spans que mudam de tamanho, indo de 100% para 50%. Nós, então, adicionamos animation-delay a cada span para criar o efeito de pulsação.

#preloader6{
    position:relative;
	width: 42px;
	height: 42px;
	animation: preloader_6 5s infinite linear;
}
#preloader6 span{
	width:20px;
	height:20px;
	position:absolute;
	background:red;
	display:block;
	animation: preloader_6_span 1s infinite linear;
}
#preloader6 span:nth-child(1){
background:#2ecc71;

}
#preloader6 span:nth-child(2){
left:22px;
background:#9b59b6;
	animation-delay: .2s;

}
#preloader6 span:nth-child(3){
top:22px;
background:#3498db;
	animation-delay: .4s;
}
#preloader6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
	animation-delay: .6s;
}
@keyframes preloader_6_span {
   0% { transform:scale(1); }
   50% { transform:scale(0.5); }
   100% { transform:scale(1); }
}

Conculsão

A grande vantagem de usar pré-carregadores em CSS3 ao invés de imagens é que eles são escaláveis e já adaptados para telas retina. Isso significa que, não importa em qual aparelho eles estejam, sempre estarão bem vivos, limpos e preparados para o futuro (contudo, tenha em mente que, nem todos os navegadores antigos dão suporte a animações em CSS).

Compreendendo algumas propriedades e técnicas importantes do CSS3, você deve ser capaz de criar seus próprios pré-carregadores. Eles são bacanas de se criar e, experimentando um pouco, você pode criar várias animações bem legais, que podem evitar que seus usuários deixem seu site.

Se você já criou algum pré-carregador legal, gostaria de vê-los! Sinta-se a vontade de deixar o link deles na área dos comentários.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Criando Pré-Carregadores em CSS3

O Básico do CSS3 para a Criação de Pré-Carregadores

Os Pseudo-elementoss :before :after

Animação em CSS3

1. Onda de Áudio

HTML

CSS

2. Quadrado Circular

HTML

CSS

3. Formas Cruzadas

HTML

CSS

4. A Cobra

HTML

CSS

5. Disco Giratório

HTML

CSS

6. Janela Brilhante

HTML

CSS

Conculsão

Os Pseudo-elementoss `:before` `:after`