a11y.skipToMainContent
1

Gerador de Carregador CSS

Projete e exporte spinners de carregamento CSS puros — escolha entre 10+ predefinições, ajuste de cores e velocidade, em seguida, copie o CSS e HTML.

px
s
px

Preview

HTML

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Loader Generator

  1. Selecione um tipo de carregador no dropdown.
  2. Ajuste a cor, tamanho, velocidade e fundo para corresponder ao seu design.
  3. Copie o código CSS e HTML gerado para o seu projeto.

O que é {nome}?

Um carregador CSS (ou spinner) é um elemento animado que diz aos usuários conteúdo está carregando. Em vez de usar GIFs ou bibliotecas de ícones, este gerador cria carregadores CSS leves e personalizáveis com dependências zero.

Escolha entre spinner, pontos, pulso, barras, anel, anel duplo, elipse, rolo, ampulheta, ondulação, e estilos de grade. Personalize a cor, tamanho, velocidade e fundo. Copie o CSS e HTML gerados diretamente para o seu projeto.

Advertisement

FAQ

Estes carregadores são livres de dependência?
Sim — todos os carregadores são CSS puros sem necessidade de JavaScript, imagens ou bibliotecas externas.
Posso usá-los na produção?
Com certeza. O CSS gerado é limpo, leve e funciona em todos os navegadores modernos.
Como faço para alterar a velocidade da animação?
Use a barra Speed para definir a duração da animação em segundos. O CSS atualiza automaticamente.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

Advertisement