Gerador de spinner e loader CSS animado

Gere um spinner / loader CSS animado (tamanho, cor, velocidade) com pré-visualização.

▸Size : 40px▸Thickness : 4px▸Speed : 0.8s

▸CSS

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #39d353;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

🔒 100 % no cliente — nenhum dado enviado

Gere um spinner ou loader CSS animado e personalize tamanho, cor, espessura e velocidade, depois copie o código pronto para uso. Um indicador de carregamento leve, sem imagens nem biblioteca JavaScript. Tudo é criado localmente no seu navegador.

What is it for?

▸ Adicionar um indicador de carregamento a uma página ou botão
▸ Personalizar cor, tamanho e velocidade da animação
▸ Obter um loader leve sem imagem ou JavaScript
▸ Copiar CSS puro reutilizável em qualquer projeto

FAQ

O spinner exige JavaScript?

Não, ele depende apenas de CSS e animação @keyframes, mantendo-se muito leve.

Posso alterar a velocidade de rotação?

Sim, basta ajustar a duração da animação para acelerar ou desacelerar o spinner.

O código funciona em mobile?

Sim, animações CSS são suaves e bem suportadas em navegadores mobile modernos.