EspañolGerador de loader CSS (carregando)
Toque num modelo, ajuste cor, tamanho e velocidade e copie o código. Todos usam só transform e opacity, que são leves para o navegador, e respeitam quem prefere menos movimento.
Animações de carregando em CSS
Disponível em: 
Gerador de loader CSS (carregando): para que serve
Escolha entre sete modelos de indicador de carregamento (anel, anel duplo, pontos, barras, pulso, barra de progresso e quadrado girando) e ajuste a cor, o tamanho e a duração. As animações usam só transform e opacity.
O código vem com role=status, um texto escondido para leitores de tela e animação mais lenta para quem pede menos movimento no sistema.
Como usar
- Escolha o modelo de loader.
- Ajuste cor, tamanho e duração.
- Copie o HTML e o CSS.
Quando usar
- Telas de carregamento de sites e sistemas.
- Botões enquanto um formulário é enviado.
- Substituir GIFs pesados de carregando.
Perguntas frequentes
Por que usar CSS em vez de GIF?
O loader em CSS pesa poucos bytes, fica nítido em qualquer tela, muda de cor com uma variável e roda fora da thread principal do navegador, então continua suave mesmo enquanto a página carrega.
O loader é acessível?
O código inclui role="status" e um texto escondido (Carregando…) para leitores de tela. Com prefers-reduced-motion, a animação fica bem mais lenta para quem pede menos movimento.
Quando mostrar um loader?
Só quando a espera passar de cerca de meio segundo. Para esperas muito curtas, o loader piscando na tela incomoda mais do que ajuda.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.