Faça um loading apenas com CSS

A equipe da Turbosite compartilha com essa postagem uma coletânea de animações loading spinners, utilizando apenas código CSS e HTML. Com um pequeno pedaço de código CSS é possível criar animações de loading incríveis, sem a necessidade de imagens ou código JavaScript.

Essa implementação resulta em um desempenho melhor em sua página, além de uma rápida implementação, já que todo o trabalho seria feito com algumas linhas de código escrito. Comparando com a clássica implementação de um loading spinner, em que era era necessário gerar uma imagem animada GIF, de vários kbytes de tamanho e com uma custosa implementação.

Listamos abaixo algumas dessas animações. Colocamos ao seu alcance o resultado, o código HTML e o código CSS para a implementação de cada spinner. Caso tenha interesse em aplicar alguma animação em seu código, basta copiar e colar o trecho do código em seu site.

 

Abaixo você confere alguma animações retiradas do perfil Ana Tudor do CodePen.

See the Pen CSS Loading Spinners by Ana Tudor (@thebabydino) on CodePen.

Retiramos do site Single Element CSS Spinners mais alguma animações e colocamos tudo no JSFiddle para que você possa conferi-las abaixo. Caso você tenha interesse em alguma animação, recomendamos que visite a página do site para o código avulso.

 

Por último retiramos do site CSS Spinners mais algumas animações. Mais uma vez juntamos todas as animações no JSFiddle para que você possa conferí-las ao vivo logo abaixo. Caso você tenha interesse em alguma animação, recomendamos que acesse esse link para a retirada do código.

 

Conseguimos juntar ao todo 30 animações de loading com essa postagem. Com um pequeno código CSS é possível criar animações incríveis e por não usar nenhuma outra ferramenta, a página ganhará em desempenho e qualidade de escrita.