Usando CSS e HTML modernos, nunca foi tão fácil criar giradores de carregamento de qualquer tipo. Este artigo mostra mais de 40 técnicas e estilos diferentes de animações CSS3 puras para criar qualquer carregador CSS que seu site possa precisar.
O que é um CSS Loading Spinner?
Se você usa um computador, já viu giradores várias vezes. São pequenas animações usadas para indicar que algo está carregando e que o usuário precisa esperar um pouco. Seu sistema operacional, por exemplo, exibe um controle giratório de carregamento quando você inicia um programa. Indica que o sistema operacional entendeu as instruções e está no processo de iniciar o aplicativo desejado. O usuário pode saber que sua solicitação está sendo processada e que eles só precisam esperar um pouco para que o programa seja iniciado e operacional.
Na Internet, spinners e carregadores sempre foram usados em sites e aplicativos, com o mesmo objetivo que seus colegas de área de trabalho. Anos atrás, os spinners de carregamento eram principalmente na forma de uma .gifimagem. Mas como as imagens tendem a consumir muita largura de banda e geralmente diminuem a velocidade de carregamento dos sites, os desenvolvedores da Web passaram para uma solução mais eficiente: Spinners em CSS puro.
Usando uma animação CSS em vez de uma .gifimagem, podemos evitar a solicitação de imagem (que consome largura de banda e retarda o processo de carregamento do site) e temos muito mais possibilidades em termos de personalização e manutenção.
Carregadores CSS por Luke Haas
Esta bela coleção de oito animações CSS3 diferentes vem com demos e o código fonte. Cada botão giratório de carregamento desta coleção é feito em CSS puro e é fácil de integrar em qualquer site ou aplicativo.
Vamos dar uma olhada no código: Neste exemplo, estou apresentando o terceiro botão giratório da esquerda, na linha superior. O CSS e HTML não são realmente complicados. Aqui está o nosso código HTML:
<div class = "loader"> Carregando ... </div>
E o CSS associado:
.loader {
tamanho da fonte: 10 px;
margem: 50px automático;
recuo do texto: -9999em;
largura: 11em;
altura: 11em;
raio da borda: 50%;
fundo: #ffffff;
fundo: -moz-linear-gradiente (esquerda, #ffffff 10%, rgba (255, 255, 255, 0) 42%);
background: -webkit-linear-gradient (esquerda, #ffffff 10%, rgba (255, 255, 255, 0) 42%);
fundo: -o-linear-gradiente (esquerda, #ffffff 10%, rgba (255, 255, 255, 0) 42%);
fundo: -ms-linear-gradiente (esquerda, #ffffff 10%, rgba (255, 255, 255, 0) 42%);
fundo: gradiente linear (para a direita, #ffffff 10%, rgba (255, 255, 255, 0) 42%);
posição: relativa;
-webkit-animation: load3 1.4s linear infinito;
animação: load3 1.4s linear infinito;
-webkit-transform: translateZ (0);
-ms-transform: translateZ (0);
transformar: translateZ (0);
}
.loader: antes de {
largura: 50%;
altura: 50%;
fundo: #ffffff;
raio da borda: 100% 0 0 0;
posição: absoluta;
topo: 0;
esquerda: 0;
conteúdo: '';
}
.loader: depois de {
fundo: # 0dc5c1;
largura: 75%;
altura: 75%;
raio da borda: 50%;
conteúdo: '';
margem: auto;
posição: absoluta;
topo: 0;
esquerda: 0;
inferior: 0;
direita: 0;
}
@ -webkit-keyframes load3 {
0% {
-webkit-transform: rotate (0deg);
transformar: girar (0deg);
}
100% {
-webkit-transform: rotate (360 graus);
transformar: girar (360 graus);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate (0deg);
transformar: girar (0deg);
}
100% {
-webkit-transform: rotate (360 graus);
transformar: girar (360 graus);
}
}
Algumas coisas a serem observadas sobre este CSS: Primeiro, observe o uso das pseudo-classes :beforee :after. Em seguida, você pode identificar @keyframes, que é usado para criar a animação de carregamento. Se você precisar de mais informações sobre animações CSS, consulte o artigo Truques CSS .
Spinkit Loaders
Vamos continuar nossa reunião com esses 12 carregadores CSS puros, que são super fáceis de integrar em qualquer tipo de site. Cada animação de carregamento vem com o código-fonte CSS e HTML que você pode usar livremente em qualquer um dos seus projetos.
Comparados aos carregadores de Luke Haas, eles tendem a ser um pouco complexos e usam muito mais código CSS.
CSSLoad
Provavelmente a biblioteca mais completa do gênero disponível na Internet, cssload.net é um site inteiro dedicado a carregadores de todos os tipos.
Não apenas este site útil permite escolher entre mais de cem estilos diferentes de giradores, mas você também pode personalizar a maioria deles. O código CSS e HTML de saída é limpo, conciso e pronto para uso em seu site ou aplicativo.
Loaders.css
Animações de carregamento de CSS puro deliciosas e focadas no desempenho. Mais de 25 estilos diferentes para escolher. Toda essa biblioteca apresenta mais de 1700 linhas de código CSS limpo e simples que você pode reutilizar em todos os seus projetos.
SpinThatShit
SpinThatShit é um conjunto de mixins SCSS para carregadores e giradores de elemento único. Se você gosta de usar o pré-processador CSS SASS, esta coleção é definitivamente uma boa escolha para seus projetos.
Girador CSS mais limpo do mundo
Este girador é bastante antigo, como foi lançado em 2013. Mas, apesar disso, é perfeito de várias maneiras, pois é um girador CSS simples que carrega rápido e é fácil de usar, modificar e integrar.
Vamos dar uma olhada no código de animação CSS:
@keyframes spin {
para {transformar: girar (1 turno); }
}
.progresso {
posição: relativa;
display: bloco embutido;
largura: 5em;
altura: 5em;
margem: 0, 5em;
tamanho da fonte: 12 px;
recuo do texto: 999em;
estouro: oculto;
animação: rotação 1s etapas infinitas (8);
}
.small.progress {
tamanho da fonte: 6 px;
}
.large.progress {
tamanho da fonte: 24 px;
}
.progress: antes,
.progress: depois,
.progress> div: before,
.progress> div: depois de {
conteúdo: '';
posição: absoluta;
topo: 0;
esquerda: 2,25em; / * (largura do contêiner - largura da peça) / 2 * /
largura: .5em;
altura: 1.5em;
raio da borda: .2em;
fundo: #eee;
box-shadow: 0 3.5em #eee; / * altura do contêiner - altura da peça * /
origem de transformação: 50% 2,5em; / * altura do contêiner / 2 * /
}
.progress: antes de {
fundo: # 555;
}
.progress: depois de {
transformar: girar (-45 graus);
fundo: # 777;
}
.progress> div: antes de {
transformar: girar (-90 graus);
fundo: # 999;
}
.progress> div: depois de {
transformar: girar (-135 graus);
fundo: #bbb;
}
O HTML relacionado é muito simples:
<div class = "large progress"> <div> Carregando… </div> </div>
Essa animação simples de carregamento foi testada e funciona perfeitamente no Chrome, Firefox, Safari e IE10. Em navegadores mais antigos, como o IE9, ele será degradado normalmente: o botão giratório ficará bem, mas não será animado.
perguntas frequentes
Como você carrega um Spinner em CSS?
Embora o próprio código dependa do tipo de controle giratório CSS que você deseja usar, ele sempre consiste em dois elementos: marcação HTML e código CSS. Você pode consultar este artigo, por exemplo.
Como você anima um Spinner de carregamento CSS puro?
As animações CSS3 permitem que um elemento mude gradualmente de um estilo para outro. Você pode alterar quantas propriedades de CSS desejar, quantas vezes desejar. Consulte o artigo Truques CSS para obter mais informações sobre animações CSS.
Como criar uma barra de progresso em CSS simples?
Barras de progresso podem ser criadas em CSS puro ou combinando CSS e jQuery. Você pode conferir o tutorial da barra de progresso CSS para se inspirar.