Os carregadores de páginas ou “Page loaders” são animações projetadas para mostrar para o usuário enquanto a página está carregando em segundo plano.
Para que a página não fique em branco enquanto está sendo carregada, muitos designers optam por usar os esse tipo de animação em seus projetos.
É possível usar um carregador de página em uma página inteira, ou em apenas em alguns elementos da página, por exemplo, quando você utiliza gráficos que demora para processar os dados, ou tabelas com muito conteúdo para ser processado.
Ideal para distração do usuário, usando um carregador ele saberá que algo está acontecendo na página ou no local que o carregador foi inserido e em algum momento ela irá abrir.
Caso a página fique em branco ele pode entender que algo de errado aconteceu e sair da página, por isso em alguns casos é importante optar por esse tipo de animação.
Neste post vamos listar 15 animações feitas apenas com CSS, sem uso nenhum de JavaScript. você pode usar como fonte de inspiração ou se alguns dos itens listado servir para seu projeto basta copiar e usar.
OuroboroCSS
9 modelos de carregadores para usar.
See the Pen CSS Loader by Geoffrey Crofte (@GeoffreyCrofte) on CodePen.
Quadrados animados
9 quadrados que formam um quadrado maior com uma animação.
See the Pen CSS Loader by Glen Cheney (@Vestride) on CodePen.
Hexágonos
Grupos de hexágonos que formam um hexágono maior com uma animação.
See the Pen Loading Image by Doug Harper (@endodoug) on CodePen.
Círculos coloridos sobreposto
Um carregador bem comum entre os carregadores de página, com um efeito bem interessante.
See the Pen css loader by Connor (@CKH4) on CodePen.
Círculos animados
Uma animação bem diferente vários círculos surgindo de um circulo central.
See the Pen Pure CSS loader #2 by Jerome Renders (@JeromeRenders) on CodePen.
Empurrando pixel
Animação simples e suave.
See the Pen pushing pixels css loader by dave (@redlabor) on CodePen.
Infinity Loader
Carregador bem diferente e muito interessante.
See the Pen CSS Infinity Loader by Michael Hobizal (@mikehobizal) on CodePen.
Círculo Único
Simples porém capaz de cativar o usuário enquanto a página carrega.
See the Pen Loader by Vadzim Tsupryk (@meecrobe) on CodePen.
Quadrados
Mais uma animação de quadrados que formam um quadrado maior.
See the Pen Pure Css Loader – Square by Robert Borghesi (@dghez) on CodePen.
Spinner
Carregador com uma animação bem bacana e colorida.
See the Pen CSS3 Loading Spinner by Iván Villamil (@ivillamil) on CodePen.
Gooey CSS
Carregador com efeito estilo pegajoso onde um circulo se junta ao outro.
See the Pen gooey css loader by Decatron (@megatroncoder) on CodePen.
Linhas
Efeito em linhas, muito interessante.
See the Pen Daily UI #20 | CSS loader by Håvard Brynjulfsen (@havardob) on CodePen.
Fancy CSS
Outro conjunto de carregadores com 9 opções para você escolher.
See the Pen Fancy CSS loaders / spinners by Jenning (@jenning) on CodePen.
Geométrico
Carregador estilo gráfico.
See the Pen Pure CSS loader #4 by Jerome Renders (@JeromeRenders) on CodePen.
Circulo animado
Circulo animado com efeito neon brilhante.
See the Pen CSS Loader animation by Sonja Strieder (@sonjastrieder) on CodePen.
Conclusão
Todos os carregadores listados aqui estão disponíveis gratuitamente, você pode escolher se quer copiar para usar em um projeto ou usar apenas de inspiração para seus próximos projetos.
Leia também: 12 menus de navegação feito apenas com CSS sem uso de Javascript.
Espero que tenha gostado 🙂
Foda!