Gerador de Loader CSS (animado)

Loaders e spinners em CSS: feedback durante operações assíncronas

Um loader (também chamado de spinner, indicador de atividade ou indicador de carregamento) é um pequeno elemento de interface que sinaliza ao usuário que algo está acontecendo sem que ele consiga ver — buscar dados, processar um pagamento, fazer upload. Sem o loader, um atraso de um segundo parece travamento e o usuário começa a clicar no mesmo botão de novo, recarregar a página ou ir embora. Com ele, o mesmo atraso vira rotina. Loaders em CSS implementam esse feedback usando apenas HTML e uma regra @keyframes, sem custo de runtime JavaScript e sem imagem extra.

A forma canônica é o anel rotativo. Você desenha um círculo com borda transparente, pinta um dos lados com uma cor sólida e anima transform: rotate de 0deg até 360deg em loop infinito linear. Como transform é uma propriedade compositada, o navegador anima na GPU sem rodar layout nem paint, e o spinner continua suave mesmo enquanto a main thread parseia o JSON pelo qual ele está esperando.

.spinner {
  width: 32px; height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

Famílias de loader e quando usar cada uma

• Spinner / ring — genérico "alguma coisa está acontecendo", duração indeterminada. Escolha padrão para esperas de até 3 segundos.
• Dots — três ou quatro pontos escalando ou pulando em sequência. Amigável, comum em indicadores de "digitando" em chat.
• Bars — barras verticais pulsantes. Combina com temas de áudio/equalizador e players de música.
• Progress bar — use apenas quando você consegue medir o progresso (upload, formulário multi-step). O elemento nativo <progress> já é acessível por padrão.
• Skeleton screen — uma pré-visualização acinzentada do layout final, ideal para páginas de conteúdo com estrutura previsível.

Dicas de performance

Anime transform e opacity — nunca top, left, width ou height, que disparam layout a cada frame. Use will-change: transform apenas em loaders de longa duração e remova depois; o hint reserva uma camada do compositor e abusar dele prejudica scroll. conic-gradient desenha um disco colorido sem SVG, e combinado com mask deixa o centro vazado para formar um anel.

Acessibilidade e UX

Todo loader deve expor role="progressbar" ou um aria-label="Carregando" para que leitores de tela anunciem a espera, e o container deve marcar aria-busy="true" até o conteúdo chegar. Envolva sempre a animação em @media (prefers-reduced-motion: reduce) e substitua por um ponto estático ou texto — usuários com distúrbios vestibulares podem ter náusea com indicadores girando. Sobre duração: abaixo de 200 ms parece instantâneo e não precisa de loader; 200 ms–1 s um spinner basta; 1–10 s uma barra com porcentagem; acima de 10 s mostre ETA explícito e ofereça botão de cancelar.

Perguntas frequentes

CSS, SVG ou Lottie — qual usar? CSS para loops geométricos simples (anéis, barras, pontos) — payload mínimo, sem requisição extra. SVG para formas que o CSS não desenha (logos, mascotes). Lottie para animações nível After Effects exportadas em JSON, quando o acabamento importa mais que o peso.

Existe alternativa nativa em HTML? Sim, <progress value="…" max="100"> para progresso determinado. Já é acessível por padrão e pode ser estilizado com CSS.

Por que meu loader engasga no mobile? Geralmente está animando uma propriedade não compositada (ex: background-position ou width), ou mora dentro de um pai que recalcula layout a cada frame. Migre para transform e garanta que o container do loader não mude de tamanho enquanto ele roda.

Qual o tamanho mínimo prático? 16 px é o mínimo — abaixo disso o usuário não distingue spinner de ponto estático. O ponto ideal fica entre 24 e 48 px, dependendo da UI ao redor.