Animação de loading com CSS puro

Veja como fazer uma animação de loading com CSS puro em pouquíssimas linhas de código, economizando centenas de KB em seu projeto web!

Ir para o artigo

Quem é que nunca precisou de uma animação de loading para usar em projetos nas interwebs?

Geralmente, procura-se um ícone de animação ou uma imagem (gif animado) de animação, garantindo, assim, uma maior usabilidade do projeto web através deste singelo símbolo (é sério).

Entretanto, algumas imagens de loading podem surpreender. E, pela conjunção, já deu para perceber que a surpresa não é nada agradável.

Animação de loading com CSS puro: você já viu como anda o peso de imagens de loading por aí? — 312KB por uma imagem de loading. Bem vindo à Web moderna.

Acredite ou não, mas alguns gifs animados de loading têm peso de centenas de KB. Peso este, claro, que passa desapercebido por quem, inadvertidamente, pesca esse tipo de imagem em qualquer stock de esquina — ou, para ser mais realista, na busca de imagens do Google, mesmo.

A solução: animação de loading com CSS puro

E aí entra a ideia-solução esperada: fazer uma animação de loading usando CSS puro. Por que não?

Depois que apresentamos os conceitos iniciais de animação CSS e; levando em conta que um gif de animação de loading simples pode ser facilmente reproduzido com formas puras de CSS, está aí a solução para não poluir projetos modernos de webdev de bibliotecas de 20MB com dezenas de KB a mais.

A cobaia da vez é essa:

Com CSS, é possível reproduzir isso facilmente. Por gosto pessoal, não vamos colocar o movimento de “pulsação” (embora seja também bem fácil de se fazer com animações CSS).

Codando a animação de loading

Para começar, vamos colocar um elemento qualquer no HTML:

<div class="c-loader"></div>

1	<div class="c-loader"></div>

Obviamente, você terá o restante de sua marcação, mas o foco, aqui, é no elemento de loading.

Na parte de estilos, a coisa é bem direta. O começo é simplesmente providenciar um quadradinho.

.c-loader {
  border: 6px solid #e5e5e5;
  border-top-color: #51d4db;
  height: 50px;
  width: 50px;
}

.c-loader {

border: 6px solid #e5e5e5;

border-top-color: #51d4db;

height: 50px;

width: 50px;

}

Dimensões e cores ficam ao gosto do freguês, mas vamos tentar nos ater ao gif original. Este código resultará em:

Animação de loading com CSS puro: o começo de tudo. — Um quadrado de borda superior com cor diferente.

A partir daí, é só fazer esse quadrado se transformar num círculo — quem aí pensou em border-radius? — e fazer ele ficar rodando infinitamente — animation, é você?

A cor diferenciada da borda de cima vai fazer toda a mágica.

See the Pen Ícone de loading com CSS puro by dpw (@desenvolvweb) on CodePen.

Conclusão

E aí, achou complicado conseguir exatamente o mesmo efeito de um gif de 312KB através de um código de 255B?

Com animações CSS, é possível fazer muita, mas muita coisa interessante em interfaces. Providenciar uma animação de loading, então, é fichinha! ;)

E você, já teve que fazer um loading personalizado usando somente CSS puro? Se puder, compartilha o link aí nos comentários.