Advertisement
  1. Web Design
  2. CSS3
Webdesign

Criando Pré-Carregadores em CSS3

by
Difficulty:IntermediateLength:MediumLanguages:

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.

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.

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.

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

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

CSS

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.

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.

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.

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.

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.

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.

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.