devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Gerador de Loader & Spinner em CSS

Escolha entre 13 spinners de carregamento em CSS puro, ajuste tamanho, cores, espessura e velocidade e copie HTML e CSS leves e acessíveis — sem imagens, SVG ou JavaScript.

Atualizado em 

  



    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: Gerador de Loader CSS
  1. Clique em um loader da galeria — todos os blocos são interativos.
  2. Ajuste tamanho, espessura, velocidade e cores; todos os blocos são atualizados juntos.
  3. Renomeie a classe CSS se ela entrar em conflito com o seu projeto.
  4. Copie o HTML e o CSS (ou a versão React) e cole na sua página.


Por que usar um loader em CSS puro?


Um spinner em CSS ocupa poucas centenas de bytes, não exige requisição de imagem nem JavaScript, escala sem perder nitidez em qualquer tamanho e pode ter a cor alterada com uma única variável. Cada loader aqui é feito a partir de um único elemento (com alguns spans extras para pontos e barras) e animado com transform e opacity, o que mantém a animação fluida mesmo quando a thread principal está ocupada carregando o seu app.


Personalizando com variáveis CSS


O CSS gerado expõe --size, --color, --track, --thickness e --speed na classe do loader. Assim você pode criar uma variação branca e pequena para botões sem copiar o CSS de novo: <span class="loader" style="--size:18px;--color:#fff">.


Acessibilidade


  • O loader tem role="status" e um rótulo “Carregando…” oculto visualmente, para que leitores de tela anunciem o carregamento.
  • Com a redução de movimento ativada, a animação desacelera em vez de parar — um spinner travado parece um erro.
  • Mostre o loader só depois de cerca de 300 ms; exibi-lo em requisições rápidas dá a sensação de lentidão, pior do que não mostrar nada.


Quer uma animação de carregamento personalizada? Crie uma no gerador de animação CSS e ajuste a curva de easing com o gerador de cubic-bezier.
Também pesquisado como: spinner css, loading spinner css, animação de carregamento css, loader css puro, preloader css, spinner de carregamento css.
Ferramentas que combinam com: Gerador de Loader CSS
  • Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
  • Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
  • Gerador de Keyframes CSS — Um editor visual para @keyframes.
  • Gerador de Animação Hover CSS — Crie animações hover para botões, cards, links e ícones.
Perguntas frequentes
Posso usar esses loaders em projetos comerciais?
Sim. O CSS é gerado para você, sem exigir licença nem atribuição.
Como mostrar o loader só enquanto algo está carregando?
Renderize o elemento do loader enquanto espera e remova-o (ou adicione o atributo hidden) quando os dados chegarem. No React, renderize de forma condicional: {loading && <Loader />}.
Funciona dentro de um botão?
Sim. Defina um tamanho pequeno e uma cor que combine com o texto do botão usando as variáveis CSS, por exemplo style="--size:16px;--thickness:2px;--color:currentColor".
Posso instalar o Gerador de Loader CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Loader CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localGerador de Animação CSSCrie animações CSS em uma linha do tempo de keyframes real. Comece com mais de 50 presets, navegue quadro…localGerador de Cubic BezierModele uma curva de easing arrastando duas alças e compare com os easings padrão. Precisa de física? Mude…localGerador de Gradiente CSSMonte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma…localGerador de Box ShadowEmpilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao…localGerador de Keyframes CSSUm editor visual para @keyframes. Adicione keyframes na linha do tempo, defina transformações, opacidade,…localGerador de Animação Hover CSSCrie animações hover para botões, cards, links e ícones. Escolha um efeito, teste em diferentes elementos…