Carregadores de elemento único: The Spinner

Criar carregadores somente CSS é uma das minhas tarefas favoritas. É sempre gratificante ver essas animações infinitas. E, claro, existem grande quantidade de técnicas e abordagens para fazê-los - não há necessidade de procure além do CodePen para ver quantos. Neste artigo, porém, veremos como fazer um carregador de elemento único escrevendo o mínimo de código possível.

Eu tenho fez uma coleção de mais de 500 carregadores single div e nesta série de quatro partes vou compartilhar os truques que usei para criar muitos deles. Cobriremos um grande número de exemplos, mostrando como pequenos ajustes podem levar a variações divertidas e como precisamos escrever pouco código para que tudo isso aconteça!

Para este primeiro artigo, vamos criar um dos padrões de carregador mais comuns: barras giratórias:

Aqui está a abordagem

Uma implementação trivial para este carregador é criar um elemento para cada barra envolvida dentro de um elemento pai (para um total de nove elementos) e, em seguida, brincar com opacity e transform para obter o efeito giratório.

Minha implementação, porém, requer apenas um elemento:

<div class="loader"></div>

…e 10 declarações CSS:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Vamos decompô-lo

À primeira vista, o código pode parecer estranho, mas você verá que é mais simples do que você imagina. O primeiro passo é definir a dimensão do elemento. No nosso caso, é um 150px quadrado. Podemos colocar aspect-ratio para usar para que o elemento permaneça quadrado, não importa o que aconteça.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

Ao construir carregadores CSS, sempre tento ter um valor para controlar o tamanho geral. Neste caso, é o width e todos os cálculos que abordamos se referirão a esse valor. Isso me permite alterar um único valor para controlar o carregador. É sempre importante poder ajustar facilmente o tamanho dos nossos carregadores sem a necessidade de ajustar muitos valores adicionais.

A seguir, usaremos gradientes para criar as barras. Esta é a parte mais complicada! Vamos usar um gradiente para criar dois barras como a abaixo:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Nosso gradiente é definido com uma cor e duas paradas de cor. O resultado é uma cor sólida, sem desbotamento ou transições. O tamanho é igual a 34% largo e 8% alto. Também é colocado no centro (50%). O truque é usar a palavra-chave valor space — isso duplica o gradiente, dando-nos duas barras no total.

De a especificação:

A imagem é repetida quantas vezes couber na área de posicionamento do fundo sem ser cortada e então as imagens são espaçadas para preencher a área. A primeira e a última imagens tocam as bordas da área.

Estou usando uma largura igual a 34% o que significa que não podemos ter mais de duas barras (3*34% é melhor que 100%) mas com duas barras teremos espaços vazios (100% - 2 * 34% = 32%). Esse espaço é colocado no centro entre as duas barras. Em outras palavras, usamos uma largura para o gradiente que está entre 33% e 50% para ter certeza de que temos pelo menos duas barras com um pouco de espaço entre elas. O valor que space é o que os coloca corretamente para nós.

Fazemos o mesmo e fazemos um segundo gradiente semelhante para obter mais duas barras na parte superior e inferior, o que nos dá uma background valor da propriedade de:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Podemos otimizar isso usando uma variável CSS para evitar repetições:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Então, agora temos quatro barras e, graças às variáveis ​​CSS, podemos escrever o valor da cor uma vez, o que facilita a atualização posterior (como fizemos com o tamanho do carregador).

Para criar as barras restantes, vamos tocar no .loader elemento e seu ::before pseudo-elemento para obter mais quatro barras para um total de oito no total.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Observe o uso de display: grid. Isso nos permite confiar no padrão da grade stretch alinhamento para fazer o pseudoelemento cobrir toda a área de seu pai; portanto, não há necessidade de especificar uma dimensão nele — outro truque que reduz o código e evita que tenhamos que lidar com muitos valores!

Agora vamos girar o pseudoelemento por 45deg para posicionar as barras restantes. Passe o mouse sobre a seguinte demonstração para ver o truque:

Configurando a opacidade

O que estamos tentando fazer é criar a impressão de que há uma barra que deixa um rastro de barras desbotadas atrás dela enquanto percorre um caminho circular. O que precisamos agora é brincar com a transparência das nossas barras para fazer aquele rastro, o que vamos fazer com CSS mask combinado com um gradiente cônico como segue:

mask: conic-gradient(from 22deg,#0003,#000);

Para ver melhor o truque, vamos aplicar isso a uma caixa colorida:

A transparência da cor vermelha aumenta gradualmente no sentido horário. Aplicamos isso ao nosso carregador e temos as barras com opacidades diferentes:

Na realidade, cada barra parece desbotar porque está mascarada por um gradiente e fica entre duas cores semitransparentes. É quase imperceptível quando isso é executado, então é como poder dizer que todas as barras têm a mesma cor com um nível diferente de opacidade.

A rotação

Vamos aplicar uma animação de rotação para obter nosso carregador. Observe que precisamos de uma animação escalonada e não contínua, por isso estou usando steps(8). 8 nada mais é do que o número de barras, então esse valor pode ser alterado dependendo de quantas barras estão em uso.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

É isso! Temos nosso carregador com apenas um elemento e algumas linhas de CSS. Podemos controlar facilmente seu tamanho e cor ajustando um valor.

Como usamos apenas o ::before pseudoelemento, podemos adicionar mais quatro barras usando ::after para terminar com 12 barras no total e quase o mesmo código:

Atualizamos a rotação de nossos pseudoelementos para considerar 30deg e 60deg em vez de 45deg ao usar uma animação de doze etapas, em vez de oito. Eu também diminuí a altura para 5% em vez de 8% para deixar as barras um pouco mais finas.

Observe também que temos grid-area: 1/1 nos pseudo-elementos. Isso nos permite colocá-los na mesma área, empilhados uns sobre os outros.

Adivinha? Podemos alcançar o mesmo carregador usando outra implementação:

Você consegue descobrir a lógica por trás do código? Aqui vai uma dica: a opacidade não é mais tratada com CSS mask mas dentro do gradiente e também está usando o opacity propriedade.

Por que não pontos em vez disso?

Podemos fazer isso totalmente:

Se você verificar o código, verá que agora estamos trabalhando com um gradiente radial em vez de linear. Caso contrário, o conceito é exatamente o mesmo onde a máscara cria a impressão de opacidade, mas fizemos as formas como círculos em vez de linhas.

Abaixo está uma figura para ilustrar a nova configuração de gradiente:

Se você estiver usando o Safari, observe que a demonstração pode apresentar erros. Isso ocorre porque o Safari atualmente não tem suporte para o at sintaxe em gradientes radiais. Mas podemos reconfigurar um pouco o gradiente para superar isso:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Mais exemplos de carregador

Aqui está outra ideia para um carregador giratório semelhante ao anterior.

Para este, estou contando apenas com background e mask para criar a forma (não são necessários pseudo-elementos). Também estou definindo a configuração com variáveis ​​CSS para poder criar muitas variações do mesmo código — outro exemplo apenas dos poderes das variáveis ​​CSS. Escrevi outro artigo sobre esta técnica se você quiser mais detalhes.

Observe que alguns navegadores ainda dependem de um -webkit- prefixo para mask-composite com seu próprio conjunto de valores e não exibirá o controle giratório na demonstração. Aqui está uma maneira de fazer isso sem mast-composite para obter mais suporte ao navegador.

Tenho outro para você:

Para este, estou usando um background-color para controlar a cor e usar mask e mask-composite para criar a forma final:

Antes de terminarmos, aqui estão mais alguns carregadores giratórios que fiz há algum tempo. Estou contando com técnicas diferentes, mas ainda uso gradientes, máscaras, pseudoelementos, etc. Pode ser um bom exercício descobrir a lógica de cada uma e aprender novos truques ao mesmo tempo. Dito isto, se você tiver alguma dúvida sobre eles, a seção de comentários está abaixo.

Resumindo

Veja, há tanta coisa que podemos fazer em CSS com nada além de um único div, alguns gradientes, pseudoelementos, variáveis. Parece que criamos vários carregadores giratórios diferentes, mas eles são basicamente a mesma coisa, com pequenas modificações.

Este é apenas o começo. Nesta série, veremos mais ideias e conceitos avançados para a criação de carregadores CSS.

---

Carregadores de elemento único: The Spinner 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-spinner/