Ir para a ferramenta
JoeLucky

Clique em ★ para salvar uma ferramenta

Categorias de ferramentas

Código para imagemGerador de gradientes CSSGlassmorphism CSSGerador de box-shadowGerador de loaders CSSGerador de blobs SVGSVG para PNGVerificador de contraste de coresConversor PX / REM / EM
JoeLucky

Ferramentas online práticas, todas em um só lugar

Política de PrivacidadeTermos de Uso

© 2026 JoeLucky®. Todos os direitos reservados.

  1. JoeLucky
  2. /CSS e design
  3. /Gerador de loaders CSS

Gerador de loaders CSS

Gere indicadores de carregamento em CSS puro.

CSS E DESIGN SEMELHANTES

Ver todas
Código para imagem

Transforme trechos de código em capturas de tela bonitas.

Abrir →
Gerador de gradientes CSS

Crie gradientes lineares, radiais e cônicos e copie o CSS na hora.

Abrir →
Glassmorphism CSS

💬 Comentários

?

Ainda não há comentários. Seja o primeiro!

O QUE É Gerador de loaders CSS?

Escolha entre 10 animações de carregamento em CSS puro, ajuste cor, tamanho e velocidade e copie o HTML e o CSS. Não requer JavaScript, então encaixa em qualquer página ou framework.

Como usar?

  1. Escolha entre 10 tipos de animação: spinner para carregamento de página inteira, pontos para indicadores de chat, skeleton para espaços reservados de conteúdo, ripple para feedback de botão e mais.
  2. Ajuste a cor (seletor), o tamanho (20–80px) e a velocidade (0,3–3,0s) à esquerda. A prévia em grade pontilhada à direita é atualizada ao vivo.
  3. Velocidade menor = animação mais rápida. 0,8–1,5s funciona melhor para a maioria dos loaders; abaixo de 0,5s parece frenético, acima de 2s parece travado.
  4. Três botões de cópia no cabeçalho da prévia: “HTML” só para a marcação, “CSS” só para os estilos, “Copiar tudo” para o bloco completo comentado.
  5. Todas as animações são CSS puro, sem dependências de JavaScript — cole direto em HTML estático, React, Vue ou qualquer framework.

Perguntas frequentes

Que tipos de animação de carregamento em CSS estão disponíveis?

Círculos giratórios, pontos saltitantes, barras de progresso, ondas, pulsos e mais — tudo em CSS puro.

Essas animações precisam de JavaScript?

Não. Todas as animações são CSS puro, sem nenhuma dependência de JavaScript.

Posso personalizar a cor e o tamanho?

Sim. Seletor de cor e controles de tamanho com prévia instantânea e saída em CSS.

Escolha o tipo de animação

Configurações

#6366F1
Tamanho40px
Velocidade (s)1.0s

⚡ Valor menor = animação mais rápida

Prévia — Spinner
Código CSS
<!-- HTML -->
<div class="loader" style="width:40px;height:40px"></div>

<!-- CSS -->
<style>
.loader {
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>

Gere em tempo real o código de desfoque de fundo e borda translúcida.

Abrir →