Carregadores de elemento único: os pontos

Estamos analisando os carregadores desta série. Mais do que isso, estamos analisando alguns padrões comuns de carregador e como recriá-los com nada mais do que um único div. Até agora, separamos o carregador giratório clássico. Agora, vamos dar uma olhada em outro que você provavelmente conhece: os pontos.

Os carregadores de pontos estão por toda parte. Eles são legais porque geralmente consistem em três pontos que parecem reticências de texto (…) que dançam.

Nosso objetivo aqui é fazer a mesma coisa com um único elemento div. Em outras palavras, não existe um div por ponto ou animações individuais para cada ponto.

O exemplo de carregador acima é feito com um único elemento div, algumas declarações CSS e nenhum pseudoelemento. Estou combinando duas técnicas usando CSS background e mask. E quando terminarmos, veremos como a animação de um gradiente de fundo ajuda a criar a ilusão de que cada ponto muda de cor à medida que se move para cima e para baixo em sucessão.

A animação de fundo

Vamos começar com a animação de fundo:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Espero que isso pareça bastante simples. O que temos é um 180px-Wide .loader elemento que mostra dois gradientes cônicos com paradas de cores fortes entre duas cores cada - o primeiro gradiente é vermelho e azul ao longo da metade superior do .loader, e o segundo gradiente é verde e roxo na metade inferior.

A forma como o plano de fundo do carregador é dimensionado (200% largura), vemos apenas uma dessas cores em cada metade de cada vez. Então temos esta pequena animação que empurra a posição desses gradientes de fundo para a esquerda, para a direita e para trás para todo o sempre.

Ao lidar com propriedades de fundo – especialmente background-position — Sempre me refiro ao meu Resposta do Stack Overflow onde estou dando uma explicação detalhada sobre como tudo isso funciona. Se você não se sentir confortável com os truques de segundo plano do CSS, recomendo fortemente a leitura dessa resposta para ajudar no que vem a seguir.

Na animação, observe que a primeira camada é Y=0% (colocado no topo) enquanto X é mudanças de 0% para 100%. Para a segunda camada, temos o mesmo para X mas a Y=100% (colocado na parte inferior).

Por que usar um conic-gradient() em vez de linear-gradient()?

Boa pergunta! Intuitivamente, devemos usar um gradiente linear para criar gradientes de duas cores como este:

linear-gradient(90deg, red 50%, blue 0)

Mas também podemos chegar ao mesmo usando um conic-gradient() – e com menos código. Reduzimos o código e também aprendemos um novo truque no processo!

Deslizar as cores para a esquerda e para a direita é uma ótima maneira de fazer parecer que estamos mudando as cores, mas pode ser melhor se mudarmos as cores instantaneamente - dessa forma, não há chance de um ponto do carregador piscar duas cores ao mesmo tempo. . Para fazer isso, vamos mudar o animationfunção de temporização de linear para steps(1)

Os pontos do carregador

Se você seguiu junto com o primeiro artigo desta série, aposto que você sabe o que vem a seguir: Máscaras CSS! O que torna as máscaras tão fantásticas é que elas nos permitem uma espécie de “recortar” partes de um fundo na forma de outro elemento. Então, neste caso, queremos fazer alguns pontos, mostrar os gradientes do fundo através dos pontos e recortar todas as partes do fundo que não fazem parte de um ponto.

Vamos usar radial-gradient() por esta:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Há algum código duplicado lá, então vamos criar uma variável CSS para simplificar as coisas:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Legal legal. Mas agora precisamos de uma nova animação que ajude a mover os pontos para cima e para baixo entre os gradientes animados.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Sim, há um total de três gradientes radiais, todos com a mesma configuração e o mesmo tamanho — a animação irá atualizar a posição de cada um. Observe que o X a coordenada de cada ponto é fixa. O mask-position é definido de forma que o primeiro ponto esteja à esquerda (0%), o segundo no centro (50%) e o terceiro à direita (100%). Nós apenas atualizamos o Y coordenar de 0% para 100% para fazer os pontos dançarem.

Aqui está o que obtemos:

Agora, combine isso com nossa animação gradiente e a mágica começará a acontecer:

Variações do carregador de pontos

A variável CSS que criamos no último exemplo torna muito mais fácil trocar novas cores e criar mais variações do mesmo carregador. Por exemplo, cores e tamanhos diferentes:

Que tal outro movimento para nossos pontos?

Aqui, tudo que fiz foi atualizar a animação para considerar posições diferentes, e obtemos outro carregador com a mesma estrutura de código!

A técnica de animação que usei para as camadas de máscara também pode ser usada com camadas de fundo para criar vários carregadores diferentes com uma única cor. Escrevi um artigo detalhado sobre isso. Você verá que a partir da mesma estrutura de código podemos criar diferentes variações simplesmente alterando alguns valores. Estou compartilhando alguns exemplos no final do artigo.

Por que não um carregador com um ponto?

Este deve ser bastante fácil de entender, pois estou usando a mesma técnica, mas com uma lógica mais simples:

Aqui está outro exemplo de loader onde também estou animando radial-gradient combinada com Filtros CSS e mix-blend-mode para criar um efeito de bolha:

Se você verificar o código, verá que tudo o que estou fazendo é animar o background-position, exatamente como fizemos com o carregador anterior, mas adicionando uma pitada de background-size para fazer parecer que a bolha fica maior à medida que absorve pontos.

Se você quiser entender a mágica por trás desse efeito blob, consulte esses slides interativos (somente Chrome) por Ana Tudor porque ela cobre o assunto muito bem!

Aqui está outra ideia de carregador de pontos, desta vez usando uma técnica diferente:

Este contém apenas 10 declarações CSS e um quadro-chave. O elemento principal e seus dois pseudoelementos possuem a mesma configuração de fundo com um gradiente radial. Cada um cria um ponto, totalizando três. A animação move o gradiente de cima para baixo usando atrasos diferentes para cada ponto.

Ah, e observe como esta demonstração usa CSS Grid. Isso nos permite aproveitar o padrão da grade stretch alinhamento para que ambos os pseudoelementos cubram toda a área de seu pai. Não há necessidade de dimensionamento! Empurre um pouco com translate() e estamos todos prontos.

Mais exemplos!

Só para deixar claro, quero deixar vários exemplos adicionais que são, na verdade, variações do que vimos. Ao visualizar as demonstrações, você verá que as abordagens que abordamos aqui são super flexíveis e abrem inúmeras possibilidades de design.

Próximo…

OK, então abordamos os carregadores de pontos neste artigo e os giradores no último. No próximo artigo desta série de quatro partes, voltaremos nossa atenção para outro tipo comum de carregadeira: os bares. Pegaremos muito do que aprendemos até agora e veremos como podemos estendê-lo para criar outro carregador de elemento único com o mínimo de código e o máximo de flexibilidade possível.

---

Carregadores de elemento único: os pontos publicado originalmente em Truques de CSS. Você deve receba o boletim informativo.

• Coinsmart. A melhor troca de Bitcoin e criptografia da Europa.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. ACESSO LIVRE.
• CryptoHawk. Radar Altcoin. Teste grátis.
• Fonte: https://css-tricks.com/single-element-loaders-the-dots/