Gerador de Animação de Carregamento CSS

O que faz

O Gerador de Animação de Carregamento CSS cria um spinner de carregamento independente e pronto para copiar e colar usando apenas CSS @keyframes — sem GIFs, sem imagens, sem biblioteca de animação JavaScript. Escolha um tipo de loader, uma cor, um tamanho e uma velocidade, e a ferramenta gera a marcação HTML e as regras CSS necessárias para renderizá-lo, atualizando instantaneamente conforme você ajusta cada controle.

Por que spinners CSS vencem GIFs e JS

Loaders GIF animados e spinners orientados por JavaScript eram o padrão antigo, mas um loader CSS puro é quase sempre a melhor escolha:

• Tamanho do arquivo — um loader GIF geralmente tem vários quilobytes de dados de imagem binária; um loader CSS tem alguns cem bytes de texto que comprimem ainda mais com gzip e são armazenados em cache com o resto de sua folha de estilos.
• Nitidez em qualquer tamanho ou DPI — GIFs são imagens raster que ficam desfocadas ou pixeladas quando dimensionadas ou visualizadas em telas de alta densidade. Um loader CSS é desenhado com border, background e transform, então permanece nítido em qualquer tamanho.
• Mudanças de cor/tamanho instantâneas — recolorir um GIF significa re-exportar a imagem; a cor de um loader CSS é um único valor que você pode tematizar, substituir ou variar por componente.
• Nenhum JavaScript necessário — a animação é executada inteiramente na propriedade CSS animation e nas propriedades transform/opacity aceleradas por GPU, portanto continua animando suavemente mesmo quando a thread principal está ocupada — exatamente quando um indicador de carregamento precisa funcionar.

Use uma biblioteca de animação orientada por JS apenas quando precisar de algo que um loop @keyframes CSS puro não possa expressar — movimento baseado em física, uma animação sincronizada com progresso de carregamento real ou sequenciamento multi-estágio complexo. Para um indicador simples de "algo está carregando", CSS é mais simples e mais leve.

Tipos de loader

• Ring Spinner — um círculo construído a partir de uma border, com a borda superior colorida diferentemente do resto e border-radius: 50%; uma animação keyframe rotate gira continuamente. Este é o indicador de carregamento mais reconhecível na web.
• Pulsing Dots — três pequenos círculos que aumentam de escala e desvanecem em sequência, cada um com um animation-delay defasado para que a pulsação pareça viajar pelos pontos.

Como usar

1. Escolha um Tipo de Loader — Ring Spinner ou Pulsing Dots.
2. Escolha uma Cor para o loader.
3. Ajuste o Tamanho para se adequar ao local onde o loader será colocado (um botão, um cartão, uma sobreposição de página inteira).
4. Configure a Velocidade para controlar quantos segundos um ciclo de animação leva — menor é mais rápido, maior é mais lento.
5. Copie o bloco CSS para sua folha de estilos e o trecho HTML para sua marcação. Ambos são totalmente independentes; nada mais é necessário para a animação funcionar.

Perguntas Frequentes

Preciso de alguma biblioteca ou script extra para que isso funcione? Não. Tudo é executado na regra CSS @keyframes enviada na saída CSS — apenas inclua o CSS e a marcação HTML, e o navegador cuida do resto.

Posso reutilizar o mesmo loader em vários lugares em uma página? Sim — o CSS direciona a classe .io-loader, portanto as mesmas regras se aplicam em qualquer lugar onde a marcação é usada. Se você precisar de cores ou tamanhos diferentes em locais diferentes, gere uma variante aqui e renomeie a classe (ou adicione uma classe modificadora) antes de colar.

Por que o HTML inclui role="status" e aria-label="Loading"? Isso torna o loader acessível para leitores de tela, que de outra forma não têm como saber que um spinner puramente visual representa um estado de carregamento.

Esta ferramenta armazena ou carrega algo? Não. Cada valor que você insere — o tipo de loader, cor, tamanho e velocidade — é processado localmente no seu navegador para construir o trecho. Nada é enviado para um servidor ou armazenado.