Carregadores de elemento único: as barras

Vimos spinners. Nós olhamos para os pontos. Agora vamos abordar outro padrão comum para carregadores: barras. E faremos neste terceiro artigo da série a mesma coisa que fizemos nos outros, fazendo-o com apenas um elemento e com CSS flexível que facilita a criação de variações.

Vamos começar não com um, nem com dois, mas com 20 exemplos de carregadores de barras.

O que?! Você vai detalhar cada um deles? Isso é demais para um artigo!

Pode parecer assim à primeira vista! Mas todos eles contam com a mesma estrutura de código e atualizamos apenas alguns valores para criar variações. Esse é todo o poder do CSS. Não aprendemos como criar um carregador, mas aprendemos diferentes técnicas que nos permitem criar quantos carregadores quisermos usando apenas a mesma estrutura de código.

Vamos fazer algumas barras!

Começamos definindo as dimensões para eles usando width (ou height) com aspect-ratio para manter a proporção:

.bars { width: 45px; aspect-ratio: 1;
}

Nós meio que “falsificamos” três barras com um gradiente linear no fundo – muito semelhante a como criamos carregadores de pontos na Parte 2 desta série.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

O código acima nos dará o seguinte resultado:

Como os outros artigos desta série, vamos lidar com muitos background trapaça. Então, se você sentir que estamos pulando rápido demais ou sentir que precisa de um pouco mais de detalhes, verifique-os. Você também pode ler meu Resposta do Stack Overflow onde eu dou uma explicação detalhada sobre como tudo isso funciona.

Animando as barras

Animamos o tamanho ou a posição do elemento para criar o carregador de barra. Vamos animar o tamanho definindo os seguintes quadros-chave de animação:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Veja o que está acontecendo lá? Entre 0% e 100%, a animação altera o background-size do gradiente de fundo do elemento. Cada quadro-chave define três tamanhos de fundo (um para cada gradiente).

E aqui está o que obtemos:

Você consegue imaginar todas as variações possíveis que podemos obter brincando com diferentes configurações de animação para tamanhos ou posições?

Vamos corrigir o tamanho para 20% 50% e atualize as posições desta vez:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…o que nos dá outro carregador!

Você provavelmente já entendeu o truque. Tudo que você precisa é definir uma linha do tempo que será traduzida em um quadro-chave. Ao animar o tamanho, a posição — ou ambos! — há um número infinito de possibilidades de carregadores ao nosso alcance.

E quando nos sentirmos confortáveis ​​com essa técnica, poderemos ir além e usar um gradiente mais complexo para criar imagens uniformes. mais carregadores.

Espere que nos dois últimos exemplos dessa demonstração, todos os carregadores de barra usem a mesma marcação e estilos subjacentes e diferentes combinações de animações. Abra o código e tente visualizar cada quadro de forma independente; você verá como é relativamente trivial fazer dezenas - se não centenas - de variações.

Ficando sofisticado

Você se lembra do truque da máscara que fizemos com os carregadores de pontos em o segundo artigo desta série? Podemos fazer o mesmo aqui!

Se aplicarmos toda a lógica acima dentro do mask propriedade, podemos usar qualquer configuração de plano de fundo para adicionar uma coloração sofisticada aos nossos carregadores.

Vamos fazer uma demonstração e atualizá-la:

Tudo o que fiz foi atualizar todos os background-* com mask-* e adicionei uma coloração gradiente. Tão simples quanto isso, ainda assim temos outro carregador legal.

Então não há diferença entre os pontos e as barras?

Não há diferença! Escrevi dois artigos diferentes para cobrir o máximo de exemplos possível, mas em ambos estou contando com as mesmas técnicas:

1. Gradientes para criar as formas (pontos ou barras ou talvez outra coisa)
2. Animando background-size e / ou background-position para criar a animação do carregador
3. Adicionando máscara para adicionar um toque de cores

Arredondando as barras

Vamos tentar algo diferente desta vez, onde podemos arredondar as bordas das nossas barras.

Usando um elemento e seu ::before e ::after pseudos, definimos três barras idênticas:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Isso nos dá três barras, desta vez sem depender de um gradiente linear:

Agora o truque é preencher essas barras com um lindo gradiente. Para simular um gradiente contínuo, precisamos brincar com background propriedades. Na figura acima, a área verde define a área coberta pela carregadeira. Essa área deve ser do tamanho do gradiente e, se fizermos as contas, é igual a multiplicar os dois lados rotulados S no diagrama, ou background-size: var(--s) var(--s).

Como nossos elementos são colocados individualmente, precisamos atualizar a posição do gradiente dentro de cada um para garantir que todos eles se sobreponham. Dessa forma, estamos simulando um gradiente contínuo, embora na verdade sejam três deles.

Para o elemento principal (colocado no centro), o fundo precisa estar no centro. Usamos o seguinte:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Para o pseudoelemento à esquerda, precisamos do fundo à esquerda

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

E para o pseudo à direita, o fundo precisa ser posicionado à direita:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

Usando a mesma variável CSS, --_i, que usamos para a tradução, podemos escrever o código assim:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Agora, tudo o que precisamos fazer é animar a altura e adicionar alguns atrasos! Aqui estão três exemplos em que tudo o que é diferente são as cores e os tamanhos:

Resumindo

Espero que até agora você esteja se sentindo super encorajado por todos os poderes que você tem para fazer animações de carregamento de aparência complexa. Tudo o que precisamos é de um elemento, seja gradientes ou pseudos, para desenhar as barras e, em seguida, alguns quadros-chave para mover as coisas. Essa é a receita completa para obter um número infinito de possibilidades, então saia e comece a preparar algumas coisas legais!

Até o próximo artigo, deixarei para vocês uma divertida coleção de carregadores onde estou combinando os pontos e os bares!

---

Carregadores de elemento único: as barras 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-bars/