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;
}