Gerador de CSS para spinner de carregamento

O que você recebe

O gerador escreve duas regras: uma classe .loader e um bloco @keyframes spin. A classe desenha um círculo, dá a ele um anel cinza claro e colore a borda superior desse anel. Os keyframes giram o círculo uma volta completa, e a linha animation repete esse giro para sempre. Nada mais é necessário: nem arquivo de imagem, nem fonte de ícones, nem script.

Com os valores padrão (60 px, anel de 6 px, #10b981, 1 segundo), o resultado fica assim:

.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); }
}

Adicione à sua página

Cole o CSS na sua folha de estilos e, em seguida, adicione um elemento vazio onde o loader deve aparecer:

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

Mostre o elemento enquanto o trabalho está em andamento e remova-o, ou oculte-o com display: none, quando o conteúdo chegar. Os atributos role e aria-label permitem que os leitores de tela anunciem o estado.

Tamanhos que funcionam

Uma regra prática é uma espessura de cerca de um décimo do diâmetro. Muito mais fino fica fraco em telas de alta resolução, e muito mais grosso transforma o anel em uma mancha.

Pontos a saber

• A cor da trilha é fixa em cinza claro (#eee). Em um fundo escuro, edite esse valor no CSS colado.
• A ferramenta cria um único spinner circular. Pontos, barras e outras formas exigem uma marcação diferente.
• Se já existir no seu projeto uma classe chamada loader ou uma animação chamada spin, renomeie-as no CSS colado para que as regras não entrem em conflito.

Como mostrar e ocultar

Um spinner de carregamento deve aparecer quando o trabalho começa e desaparecer quando termina. Um padrão simples é manter um atributo hidden no elemento e removê-lo quando uma requisição começa. Se a espera costuma ser bem curta, adicione um pequeno atraso de alguns centenas de milissegundos antes de mostrar o anel, para que respostas rápidas não façam o spinner piscar. Seja qual for a escolha, oculte sempre o spinner também no caso de erro, ou os visitantes ficarão esperando algo que já falhou.