Gerador de Loader CSS

Como funciona o CSS gerado

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

O spinner é um círculo desenhado com uma borda grossa. A regra border-top-color pinta apenas a parte superior do anel com a cor de destaque, de modo que o anel é lido como um arco, e a regra @keyframes spin o gira em torno do centro. Girar com transform: rotate() mantém a animação leve, porque o navegador move o elemento no compositor em vez de redesenhar quadro a quadro.

Para exibi-lo em uma página, adicione um elemento e carregue o CSS:

<div class="loader" role="status" aria-label="Carregando"></div>

Torne-o acessível

• Adicione role="status" para que os leitores de tela anunciem o spinner.
• Defina aria-label com o texto de status, por exemplo “Carregando”.
• Não esconda conteúdo atrás de um spinner por mais de alguns segundos sem um fallback de timeout.
• Respeite prefers-reduced-motion. Para quem desativou as animações, substitua a rotação por um simples fade ou um texto estático “Carregando…”:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

Quando usar um spinner em vez de uma UI otimista

• Resposta abaixo de 100 ms: dispensa spinner; o olho humano mal percebe o atraso.
• 100 ms – 1 s: um spinner discreto (círculo pequeno, texto do botão “Carregando…”) evita cliques duplos.
• 1 s – 10 s: um spinner bem visível, de preferência com progresso se for mensurável.
• > 10 s: não é um problema de spinner; descubra o que está lento e conserte.

Em envios de formulários e cliques em botões, um spinner dentro do botão costuma ser melhor do que uma sobreposição em tela cheia.