O intuito do artigo não é apenas mostrar como podemos criar um loading bouncy apenas usando css, mas também explicar o que cada propriedade css faz para que ao fim tenhamos um bouncy loading animation.
.loader { display: inline-block; } .loader: É uma classe que define um elemento como um bloco em linha (inline-block). No contexto dessa animação, ele deve ser aplicado a um elemento que contém os elementos com a classe .loader-ball.
.loader-ball { display: inline-block; width: 20px; height: 20px; background-color: #ffff; margin-inline: 5px; border-radius: 50%; animation: bounce 450ms alternate infinite; } .loader-ball: É uma classe que define os elementos que formam as bolas animadas. Cada bola é um círculo com 20px de largura e altura (width: 20px; height: 20px;) e tem a cor de fundo branca (background-color: #ffff;).
As bolas têm um espaçamento horizontal entre elas de 5px (margin-inline: 5px) e têm o formato de um círculo perfeito devido ao border-radius: 50%. Além disso, a animação de "bounce" é aplicada a essas bolas, com duração de 450ms, alternando entre o estado inicial e final de forma infinita (animation: bounce 450ms alternate infinite).
.loader-ball:nth-child(1) { background-color: blue; animation-delay: 75ms; } .loader-ball:nth-child(2) { background-color: yellow; animation-delay: 150ms; } .loader-ball:nth-child(3) { background-color: green; animation-delay: 300ms; } .loader-ball:nth-child(1), .loader-ball:nth-child(2), .loader-ball:nth-child(3): Essas são regras adicionais que especificam o estilo de cada bola individualmente.
Cada uma das bolas é selecionada por seu índice (1, 2 e 3, respectivamente) e possui uma cor de fundo diferente (azul, amarelo e verde, respectivamente) e um atraso específico na animação.
O primeiro elemento (:nth-child(1)) tem um atraso de 75ms, o segundo (:nth-child(2)) tem um atraso de 150ms e o terceiro (:nth-child(3)) tem um atraso de 300ms. Isso cria um efeito de animação escalonado, onde cada bola começa a animar após um pequeno atraso em relação à bola anterior.
@keyframes bounce { from { transform: scaleX(1.25); } to { transform: translateY(-50px) scaleX(1); } } @keyframes bounce: Essa é uma regra de animação keyframes que define a animação chamada "bounce". Essa animação é definida com duas etapas (from e to) que representam o estado inicial e final da animação.
Durante a animação, a bola é escalada horizontalmente para 1.25 vezes o seu tamanho original (transform: scaleX(1.25);) e é movida para cima (na direção negativa do eixo Y) em 50px (transform: translateY(-50px) scaleX(1);). Isso cria o efeito de "quicar" da bola enquanto ela é reduzida horizontalmente e movida para cima e para baixo.
Código css completo:
.loader { display: inline-block; } .loader-ball { display: inline-block; width: 20px; height: 20px; background-color: #ffff; margin-inline: 5px; border-radius: 50%; animation: bounce 450ms alternate infinite; } .loader-ball:nth-child(1) { background-color: blue; animation-delay: 75ms; } .loader-ball:nth-child(2) { background-color: yellow; animation-delay: 150ms; } .loader-ball:nth-child(3) { background-color: green; animation-delay: 300ms; } @keyframes bounce { from { transform: scaleX(1.25); } to { transform: translateY(-50px) scaleX(1); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <span class="loader"> <span class="loader-ball"></span> <span class="loader-ball"></span> <span class="loader-ball"></span> <span class="loader-ball"></span> </span> </body> </html> Caso queira ver o código funcionando acesse o CodeSandBox
Top comments (0)