Gerador de Animação de Carregamento CSS

Gerador de Animação de Carregamento CSS

Gere oito animações populares em CSS puro — anel giratório, anel duplo, pontos pulsantes, pontos saltitantes, bola saltitante, barras de equalizador, círculo pulsante e indicador de digitação. Ajuste a cor, o tamanho, a largura da linha e a duração; observe a prévia em tempo real atualizar-se instantaneamente; copie o @keyframes + HTML mínimo para seu projeto. Sem JavaScript, sem SVG, sem dependências externas.

Como usar

1. Escolha um tipo de animação no menu suspenso.
2. Defina o tamanho do carregador em pixels e ajuste a largura da linha para tipos baseados em anel.
3. Escolha uma cor primária e uma cor da trilha / secundária.
4. Defina a duração (em segundos) para um ciclo completo.
5. Escolha um formato de saída — HTML + CSS combinado, CSS apenas ou HTML apenas.
6. Defina opcionalmente uma etiqueta personalizada para leitores de tela.
7. Copie o trecho gerado ou baixe-o como arquivo.

Características

• Oito estilos de animação — cobre os padrões mais comuns de carregamento em interfaces modernas.
• Pré-visualização em tempo real — cada alteração recarrega instantaneamente, para que você possa verificar o tempo e a suavidade antes de copiar.
• Saída em CSS puro — sem custo de execução de JavaScript e sem markup SVG para manter.
• Nomes de classe escopados — cada trecho gerado usa um prefixo único, para que múltiplos carregadores possam coexistir sem colisão.
• Acessível por padrão — cada carregador inclui role="status" e uma etiqueta aria-label configurável.
• Três modos de saída — HTML + CSS combinado, CSS apenas ou HTML apenas, dependendo da forma como você integra.