Executando verificação de segurança...
14
Ja1
2 min de leitura ·

Ninguém precisa mais de svg/gif para animações simples agora! - Animação de loading com CSS puro! [tutorial]

TL;DR clique aqui

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:

Codepen

Agora falta só animar a animação:

Pra isso vamos usar o @keyframes e o animation 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 usar transform para literalmente "transformar" o elemento e rotate 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...?
Carregando publicação patrocinada...
4
1

Verdade!
Eu só coloquei sem o linear pra ficar mais dinâmico mesmo dkaskdsk. Mas fica bom como linear também.
Não sei se tô ficando maluco, mas na minha cabeça parece que eu tô esperando menos se o loading for desses que desacelera e acelera kdksaska.

2
1

Nossa, simmm. Fica muito bom nesse estilo, acho que é um dos melhores.
E sobre a cor, eu até forkei o pen pra testar e realmente pelo menos na minha opinião fica bem melhor sem a mudança de cor.

3

Para quem trabalha com tailwind, essas são as classes necessárias que eu achei mais próximo:

<div className="border-8 dark:border-zinc-300 dark:border-t-blue-700 border-zinc-300 h-9 w-9 rounded-full border-t-blue-300 animate-spin"></div>

Esse estilo já vem com um dark e light theme

Como fica (tem umas "travadinhas" por causa do gif):
Imagem de um loading
Imagem de um loading

3
2

Nossa! Que diferença com syntax highlight! Já até atualizei ali 😅.
Sou novo com MarkDown akdkaka. Inclusive faz falta um tutorial de aqui no TabNews...


A propósito, pode me responder umas coisas?

Tem como colorir outras partes do texto?

O Markdown não aceita nem <img> nem iframe nem nenhum tipo de embed, né?

Tag <style> não funciona por aqui também, né?

2

Tem como colorir outras partes do texto?

Isso eu não sei te responder, mas acho que não.

O Markdown não aceita nem nem iframe nem nenhum tipo de embed, né?

Ele aceita <img>, já iframe não sei se há suporte.

Tag <style> não funciona por aqui também, né?

Sim, a tag <style> não funciona.


Eu não uso muito markdown então não sei responder todas as perguntas, se alguém com mais propriedade puder verificar e me corrigir agradeço 🤝