Gerador de animação de spinner CSS

Como a animação é construída

O CSS gerado tem duas partes que funcionam em par. A propriedade animation de .loader dá nome à animação, define sua duração, escolhe a função de temporização e a repete:

animation: spin 0.8s linear infinite;

A regra @keyframes spin descreve o próprio movimento. Ela tem apenas um estado final, que é uma rotação de 360 graus. O navegador parte da posição normal do elemento e interpola até esse estado final:

@keyframes spin {
  to { transform: rotate(360deg); }
}

O campo Velocidade da ferramenta vira a duração. Todo o restante, incluindo linear e infinite, permanece igual.

Como escolher a duração

Anéis grandes podem girar um pouco mais devagar que os pequenos, porque a borda de um círculo grande já percorre mais distância a cada segundo.

Por que temporização linear

A ferramenta usa linear para que o anel mantenha a mesma velocidade angular em toda a volta. Curvas de aceleração como ease-in-out fazem o anel desacelerar e acelerar a cada volta, o que parece trepidação em um loop infinito. Se você quiser esse efeito mesmo assim, troque a palavra linear no CSS colado.

Limites a considerar

• Uma velocidade de 0 gera uma animação de duração zero, então o anel não gira de forma visível. Use um valor acima de 0.
• O spinner sempre gira no sentido horário. Para invertê-lo, troque a rotação final por -360deg depois de copiar.
• O movimento é uma única rotação contínua. Pulsação, quique ou movimentos em várias etapas exigiriam keyframes extras escritos à mão.

Pausar e controlar a animação

Depois que o CSS estiver na sua página, você pode controlar a animação com propriedades padrão. Definir animation-play-state: paused; congela o anel no lugar, o que é útil para um estado em que o trabalho já terminou, mas o elemento continua visível. Definir animation-delay: 0.2s; adia o início, então o spinner só aparece se a espera não for instantânea. São propriedades CSS normais, adicionadas à regra .loader depois que você copiar o código.