Gerador de Loader CSS

O que é esta ferramenta?

Um loader CSS é um pequeno elemento animado — um anel giratório, pontos que saltitam, um círculo que pulsa, ou uma barra de progresso em movimento — usado para mostrar que o conteúdo está carregando, sem loop de animação em JavaScript e sem precisar de imagem ou GIF. Ele é construído com algumas regras CSS mais um bloco @keyframes que define como o elemento se move ao longo do tempo.

Esta ferramenta gera quatro padrões de loader comuns com CSS real e funcional: um spinner giratório baseado em borda, três pontos que saltitam em sequência, um círculo que pulsa para dentro e para fora, e uma barra com preenchimento deslizante. Ajuste tamanho, cor e duração na pré-visualização ao vivo, depois copie o CSS gerado e o elemento HTML mínimo ao qual ele se aplica.

Fonte: CSS Animations Level 1, W3C — a especificação que define @keyframes e as propriedades de animação com as quais estes loaders são construídos.

Por que usar?

• A pré-visualização ao vivo anima em tempo real conforme você muda estilo, tamanho, cor ou velocidade — você vê exatamente o que vai usar.
• Gera o CSS completo, incluindo o bloco @keyframes, não apenas um trecho que você precisa terminar sozinho.
• Também gera o HTML exato esperado pelo CSS, sem precisar adivinhar nomes de classes ou estrutura de elementos.
• Quatro padrões de animação distintos (spinner, pontos, pulso, barra) cobrem os casos de uso mais comuns de estados de carregamento.
• Animação CSS pura — sem JavaScript, sem arquivos de imagem, mais leve e suave que um GIF animado.
• Roda inteiramente no seu navegador, grátis, sem cadastro.

Como usar

1. Escolha um estilo de loader: anel giratório, pontos saltitantes, círculo pulsante ou barra de progresso.
2. Arraste o controle de tamanho para aumentar ou diminuir o loader.
3. Escolha uma cor — ela se torna a cor de destaque do loader (a borda giratória, os pontos, ou o preenchimento da barra).
4. Ajuste a velocidade para deixar a animação mais rápida ou lenta; a maioria dos loaders de interface fica melhor entre 0,6s e 1,5s por ciclo.
5. Copie o CSS gerado para sua folha de estilo e cole o trecho HTML onde o loader deve aparecer.

Exemplo

Entrada

Estilo: anel giratório · Tamanho: 40px · Cor: laranja · Velocidade: 1,0s

Resultado

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

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

Um spinner de anel clássico: um círculo com borda quase transparente em três lados e cor sólida no quarto, girando continuamente com uma animação linear e infinita.

Por que usar loaders CSS em vez de GIFs animados

Spinners GIF animados foram o padrão por anos, mas hoje um loader CSS é quase sempre a melhor escolha: são algumas centenas de bytes de texto em vez de um arquivo de imagem binário, escalam para qualquer tamanho sem pixelizar já que são desenhados com bordas e transforms, e a cor pode ser trocada instantaneamente com um único valor CSS em vez de reexportar uma nova imagem.

Os quatro estilos aqui — spinner, pontos, pulso, barra — também são os que mais aparecem em interfaces reais, de estados de carregamento em botões a overlays de página inteira. Cada um anima apenas transform e opacity nos keyframes, o que os navegadores conseguem animar suavemente na GPU sem travar o resto da página.

Escolhendo o estilo certo para a situação

• Anel giratório: a escolha mais neutra e de uso geral — funciona bem dentro de botões e pequenos estados de carregamento em linha.
• Pontos saltitantes: passa uma sensação mais leve e divertida; comum em indicadores de 'digitando...' em chats e esperas curtas.
• Círculo pulsante: bom para um indicador de carregamento de elemento único ou como um ponto de status 'ativo/ao vivo'.
• Barra de progresso: sugere avanço e costuma ser esperada em carregamentos de página ou processos de várias etapas, mesmo sem porcentagem exata.

Usando o loader no seu projeto

Cole o CSS gerado uma vez na sua folha de estilo, depois reutilize o trecho HTML em qualquer lugar que precise de um estado de carregamento — dentro de um botão enquanto um formulário é enviado, sobre um card enquanto dados são buscados, ou centralizado em um overlay de página inteira. Como a animação é CSS puro, ativá-la ou desativá-la é tão simples quanto adicionar ou remover o elemento do DOM, ou escondê-lo com display: none.

→ Gerador de Box Shadow · Minificador de CSS

Perguntas frequentes