Ninguém precisa mais de svg/gif para animações simples agora! - Animação de loading com CSS puro! [tutorial]
Pra exemplificar esse recurso vamos fazer uma animação de loading.
E é bem simples:
Primeiro no HTML basta criar uma div pra representar a animação:
<div id="loading"></div>
Depois o resto tudo é no CSS!
Vamos começar definindo o tamanho da animação (use o tamanho e unidade que achar melhor):
#loading {
height: 35px;
width: 35px;
}
Depois, para ser a "rodinha" do símbolo é bem intuitivo: definir uma borda!
E para deixar redondo, basta definir um border-radius:
#loading {
border: 10px solid #e5e5e5;
border-radius: 100%
}
E para terminar o símbolo basta definir a cor da parte de cima da borda:
#loading {
border-top-color: #51d4db;
}
Ok, agora devemos ter algo tipo assim:
Agora falta só animar a animação:
Pra isso vamos usar o
@keyframes
e oanimation
no CSS.
Podemos usar tanto 0%
e 100%
, quanto from
e to
A diferença é que com porcentagem podemos setar mais frames além do inicial e do final.
O código para girar o loading é bem simples e fica assim:
Basta criar um
@keyframes
com o nome que quiser (coloquei carinhosamente naoeomeupc aqui, porque o meu pc não roda) e usartransform
para literalmente "transformar" o elemento erotate
para rotacionar.
@keyframes naoeomeupc{
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Note que o bloco de 0% não altera nada, por isso poderia ter sido omitido.
Agora é só aplicar a animação lá no #loading
:
O código todo lá ficou assim:
#loading {
border: 10px solid #e5e5e5;
height: 35px;
width: 35px;
border-top-color: #51d4db;
border-radius: 100%;
animation: naoeomeupc 1s infinite;
}
Simplesmente usa-se
animation
seguido do tempo de duração da animação e infinite para ela acontecer eternamente.
Outro atributo útil é o `linear` caso queira que a velocidade seja igual
o tempo todo ou o `cubic-bezier(0, 0, 0, 0);` caso você mesmo queira definir
a velocidade em até quatro pontos!
Por padrão, a animação começa devagar, acelera e termina devagar de novo.
E tudo pronto!
O código completo deve ter ficado assim:
CodePen
HTML:
<div id="loading"></div>
CSS:
#loading {
border: 10px solid #e5e5e5;
height: 35px;
width: 35px;
border-top-color: #51d4db;
border-radius: 100%;
animation: naoeomeupc 1s infinite;
}
@keyframes naoeomeupc {
100% {
transform: rotate(360deg);
}
}
E só com isso você conseguiu fazer uma animação de loading!
Agora pensa no leque de possibilidades que isso abre pra implementar várias outras animações totalmente personalizáveis de maneira simples e prática!
Você acha que vale mais a pena do que os gifs, svg, etc...?