Crie spinners e carregadores de elemento único com CSSPIN

Você pode construir algumas coisas incríveis com CSS3, de campos de entrada personalizados para dropdowns e até mesmo gráficos vetoriais. Essas técnicas são rapidamente ultrapassando JavaScript, tornando mais fácil para os desenvolvedores criar melhores experiências de usuário.

Uma das coisas mais difíceis de construir é animação spinner de carregamento mas a animação CSS moderna torna isso muito simples.

Para economizar tempo construindo do zero, você pode usar uma biblioteca como CSSPIN com toneladas de spinners personalizados pré-definidos. Todas essas animações são gratuitas para serem clonadas e totalmente abertas, então você tem acesso total para editar o código como você deseja.

Configurando um spinner com esta biblioteca é uma brisa. Você apenas copiar a biblioteca CSS na sua página, então adicione os elementos HTML personalizados onde quer que você queira que eles apareçam.

Estes spinners personalizados usam apenas um elemento HTML para criar o efeito de animação. Isso é enorme porque o efeito gráfico e de animação é renderizado puramente através de classes CSS.

E, desde que você tenha acesso ao código-fonte, você pode substituir formas, cores, tamanhos e velocidades de animação para melhor atender seus projetos.

Apenas observe o código usa a sintaxe LESS, então você precisa estar familiarizado com essa linguagem de pré-processamento para fazer edições importantes.

Mas você pode encontrar muitas exemplos CSS simples na página principal de demonstração, junto com instruções simples na página do GitHub.

Se você estiver familiarizado com npm ou Bower esses são métodos alternativos para instalar a biblioteca.

Não importa como você o instala, essa é uma ótima biblioteca de animação CSS para trabalhar. É pra ser totalmente modular com muito espaço para novos spinners, novas animações e personalizações de outros desenvolvedores.

Para saber mais e navegar em toda a documentação, confira o Repo CSSPIN no GitHub. O criador também fez um pequeno vídeo de configuração que você pode assistir abaixo.