Carregador de CSS / Gerador de Spinner

Uma breve história da animação CSS que alimenta o seu spinner

A regra @keyframes e o atalho animation que este gerador emite são definidos no Módulo CSS Animations Nível 1. O primeiro Working Draft do W3C foi publicado em 20 de março de 2009 e a spec finalmente atingiu a Recomendação W3C em 11 de dezembro de 2018, nove anos depois. Naquela época, todos os navegadores em uso já suportavam a sintaxe há anos: Safari 4 (junho de 2009) com o prefixo -webkit-, Firefox 5 (junho de 2011), Internet Explorer 10 (outubro de 2012), e sem prefixo pelo Chrome 43 em abril de 2015. O Módulo CSS Animations Nível 2 é o Working Draft atual e adiciona animações conduzidas por scroll através de animation-timeline (entregue no Chrome 115, julho de 2023; Safari e Firefox seguiram no final de 2024). A rotação no preset «spinner» vem do Módulo CSS Transforms Nível 1, uma spec separada em Candidate Recommendation desde fevereiro de 2019 mas universalmente entregue: transform: rotate(360deg) em 100% dentro de um bloco @keyframes é o que gira o anel.

Acessibilidade não é opcional: a preferência «Reduzir movimento»

Cada sistema operacional lançado desde 2014 inclui uma configuração de acessibilidade «Reduzir movimento», macOS «Reduzir movimento» (em Acessibilidade → Tela), iOS «Reduzir movimento», Windows «Mostrar animações», Android «Remover animações», GNOME «Ativar animações» desativado. A media query prefers-reduced-motion (definida no Media Queries Nível 5, primeiro Working Draft público do W3C novembro de 2017) permite que seu CSS detecte essa preferência e pare o spinner. Sempre envolva qualquer spinner em:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

O Critério de Sucesso WCAG 2.1 2.3.3 «Animação a partir de Interações» (Nível AAA, Recomendação W3C 5 de junho de 2018) exige que qualquer animação de movimento desencadeada por interação possa ser desativada a menos que o movimento seja essencial. Um spinner raramente é essencial. WCAG 2.2 (outubro de 2023) herda a mesma regra.

Para leitores de tela, envolva o spinner em <div role="status" aria-live="polite"> com um texto «Carregando…» escondido visualmente. Quando o carregamento completar, substitua o conteúdo; a região live anuncia «Carregado» às tecnologias assistivas sem gritar. Defina aria-busy="true" na região contenedora enquanto carrega e aria-busy="false" depois. Esse padrão está documentado no capítulo de regiões live do Guia de Práticas de Autoria ARIA do W3C.

Por que spinners CSS permanecem suaves a 60 fps

Os pipelines de renderização dos navegadores modernos têm três etapas: layout (calculando posições), paint (preenchendo pixels), e composite (combinando camadas na GPU). As propriedades transform e opacity são as únicas duas que pulam o layout e o paint e rodam puramente no thread do compositor. Animá-las é essencialmente gratuito a qualquer framerate. Animar width, height, top, left, margin, ou qualquer coisa que mude o box model força um passe completo de layout-e-paint a cada frame e cai rapidamente abaixo de 60 fps em dispositivos de baixa qualidade. Cada preset neste gerador anima apenas transform e opacity por esse motivo. Se você precisa de uma dica para o navegador, will-change: transform (definido no Módulo CSS Will Change Nível 1, Candidate Recommendation W3C 26 de abril de 2022) promove o elemento à sua própria camada de compositor; use com moderação porque cada camada custa memória de GPU.

Quando um spinner é a resposta certa e quando não é

Em Response Times: The 3 Important Limits (1993, reformulado em 2014), Jakob Nielsen do Nielsen Norman Group definiu três limites de percepção: 0,1 segundo é «instantâneo», 1 segundo é o limite para fluxo de pensamento ininterrupto, 10 segundos é o limite para manter a atenção do usuário. Mapeie sua estratégia de loader a esses:

• Menos de 1 segundo: nenhum indicador. Um spinner que pisca por 300 ms é pior do que nenhum spinner: o olho registra a piscada como um glitch.
• 1 a 5 segundos: um spinner indeterminado ou uma barra estilo barber-pole. Diz ao usuário que «algo está acontecendo» sem se comprometer com uma duração.
• 5 a 10 segundos: uma <progress max="100" value="42"> determinada com uma porcentagem. Os usuários toleram melhor uma longa espera quando podem ver o progresso.
• Navegação de rotas SPA: uma tela esqueleto (caixas cinzas placeholder imitando o layout final) parece mais rápida do que um spinner. Luke Wroblewski cunhou o termo em sua postagem de março de 2013 Mobile First Patterns; o «shimmer» do Facebook (2014) e o Material 2 do Google (maio de 2018) o tornaram comum.

Funções de easing e o que cada uma transmite

A propriedade animation-timing-function (e o Módulo CSS Easing Functions Nível 1, Candidate Recommendation 6 de dezembro de 2022) escolhe como o valor progride entre keyframes:

• linear, taxa constante. Correto para um spinner contínuo; errado para qualquer coisa desacelerando para um estado final.
• ease, ease-in, ease-out, ease-in-out, aliases de palavra-chave para curvas cubic bezier comuns. Padrão do navegador é ease.
• cubic-bezier(x1, y1, x2, y2), curva personalizada com quatro flutuantes em [0, 1]. cubic-bezier(.25, .1, .25, 1) é a curva «ease» padrão. Tente cubic-bezier(.68, -.55, .27, 1.55) para um efeito de salto «overshoot».
• steps(n, jump-end), saltos discretos, ideal para um loader de pontos que muda de estado sem interpolar.

Erros comuns

• Entregar um spinner sem prefers-reduced-motion. Usuários com distúrbios vestibulares, gatilhos de enxaqueca ou sensibilidades de atenção são atingidos por cada anel girando na web. A correção são duas linhas de CSS.
• Esquecer role="status" e o texto escondido visualmente. Um spinner que apenas gira visualmente não diz nada a um usuário de leitor de tela.
• Velocidade de animação abaixo de 0,5 segundo por ciclo. Um spinner que completa em 0,3 s parece frenético e é lido como «erro» por muitos usuários. 1 a 1,5 s por ciclo é o intervalo confortável.
• Animar propriedades de layout. Animar width, margin ou top causa thrash de layout. Fique com transform e opacity.
• Mostrar um spinner para cada operação. Se os dados chegarem em 100 ms, o spinner pisca e é lido como um glitch. Atrase o spinner em 200 a 300 ms com um setTimeout que você limpa em caso de sucesso.
• Esquecer de centralizar o spinner. Um `.spinner` flutuando no canto superior esquerdo de uma seção porque seu contêiner não é um contêiner flex/grid é o segundo bug visual mais comum.

Mais perguntas frequentes

Estes spinners funcionarão em navegadores antigos?

Todos os navegadores modernos (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+) suportam @keyframes e transform sem qualquer prefixo. Internet Explorer 10 e 11 exigem o prefixo -ms- em alguns lugares mas de outra forma funcionam. IE 9 e anterior não têm suporte de animação CSS: fall back para um GIF animado, ou use @supports (animation: spin 1s) para detecção de recurso.

Como paro o spinner quando o conteúdo carrega?

Ou remova o elemento do DOM, oculte-o com display: none ou atributo hidden, ou pause a animação com animation-play-state: paused. Pausar é o mais barato se você puder mostrá-lo novamente. Se você usou o padrão ARIA, também defina aria-busy="false" no contêiner e substitua o texto de carregamento pelo anúncio do estado carregado.

Posso personalizar as cores do spinner além do que o seletor permite?

Sim. O CSS de saída usa valores hex / rgb / hsl regulares; substitua-os por variáveis CSS (var(--brand-primary)) para que o spinner siga seu design system. Para um spinner bicolor, edite o atalho border-color: border-color: var(--brand) transparent transparent transparent dá o look clássico «arco de um quarto».

Por que não usar simplesmente uma animação SVG ou Lottie?

Spinners CSS pesam menos de 200 bytes, não precisam de request extra, não precisam de runtime JavaScript, e são renderizados antes de qualquer carregamento de recurso externo. SVG é bom para formas complexas; Lottie é bom para animações criadas por designers do After Effects. Para um indicador genérico «algo está carregando», CSS é a ferramenta mais barata que faz o trabalho corretamente.

Algo é rastreado ou enviado a um servidor?

Não. O gerador roda inteiramente no JavaScript do seu navegador. Suas escolhas de cor, ajustes de tamanho e CSS copiado nunca saem da página. Verifique na aba Rede do DevTools.