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.

Related tools

Proporção · calculadora Calcule uma proporção (16:9...) e derive uma dimensão proporcional ausente. Gerador de código de barras Gere um código de barras (EAN-13, Code128, UPC) a partir de um valor, baixável, no seu navegador. Base64 → imagem Decodifique um data URI ou Base64 em uma imagem visualizável e baixável, no seu navegador. CSS border-radius · gerador Crie cantos arredondados em CSS (border-radius) com pré-visualização ao vivo e código pronto para copiar. CSS box-shadow · gerador Gere um CSS box-shadow com pré-visualização ao vivo e código pronto para copiar. Removedor de fundo verde Torne uma cor de fundo (tela verde/azul) transparente e exporte um PNG, no seu navegador.