Loaders.css reúne animações de carregamento escritas em puro CSS


loaderscss

Ao trabalhar para melhorar o desempenho de um site e torná-lo mais leve, cada elemento conta. Inclusive as animações de carregamento de páginas. Por isso, o Loaders.css reúne vários desses modelos, escritos puramente em CSS, prontos para o uso.

Há alguns modelos clássicos, como o de estrelas que se acendem e apagam, triângulos giratórios, barras que crescem e diminuem. Mas o site também oferece algumas animações mais ousadas, como uma do Pac-Man devorando bolinhas em sequência.

Na página do projeto no GitHub, há um guia detalhado de instalação e uso. Basicamente, o usuário precisa primeiro instalar o pacote em sua máquina:

bower install loaders.css

npm i —save-dev loaders.css

Depois, será necessário incluir no projeto o arquivo loaders.min.css. Feito isso, crie um elemento e adicione a classe da animação desejada, como <div class=“loader-inner ball-pulse”></div>, e os <div>s adequados.

Para customizar a cor de fundo, adicione o estilo desejado no <div> correspondente, como:

.ball-grid-pulse > div: { background: orange; }

Saiba mais sobre o Loaders.css no site do projeto