Gerador de Loader CSS
Crie belos spinners e animações de carregamento CSS. 12 estilos, personalize cores, tamanho e velocidade.
Estilo do loader
Personalizar
Visualização ao vivo
Código Gerado
Ferramentas populares
Sobre Gerador de Loader CSS
O Gerador de Loaders CSS ajuda você a criar resultados de qualidade na hora, de graça e direto no navegador. Crie spinners e animações de carregamento em CSS. 12 estilos, com cores, tamanho e velocidade personalizáveis. Copie o código CSS puro. Nosso Gerador de Loaders CSS vem com padrões inteligentes, mas deixa você ajustar cada configuração para que o resultado final combine com o seu projeto. Como tudo roda no lado do cliente, o que você digita e o que é gerado continua privado — nada é enviado nem registrado. Use quantas vezes quiser, em projetos pessoais ou comerciais, sem precisar dar créditos.
Casos de uso
Como usar
Clique em um dos doze blocos animados em Estilo do Loader: Spinner, Dots, Pulse, Ring, Bars, Bounce, Chase, Square, Dual Ring, Ripple, Ellipsis ou Hourglass.
Defina a Cor no seletor ou no campo hexadecimal e escolha uma Cor Secundária para a trilha vazia atrás dos loaders em formato de anel.
Arraste Tamanho de 16px a 120px, Velocidade de 0.3s a 3s e Espessura de 2px a 12px até a animação ficar do jeito que você quer.
Veja o spinner rodando no painel de Pré-visualização ao Vivo para conferir o tamanho e o ritmo em escala real.
Mude a aba de saída para CSS, HTML ou Completo, clique em Copiar e cole a marcação fwt-loader e seus keyframes na sua página.
Dicas Pro
- Altere as configurações uma de cada vez para enxergar como cada opção muda o resultado do Gerador de Loaders CSS.
- Clique várias vezes no botão de gerar de novo ou de sortear — muitas vezes o melhor resultado aparece só na terceira ou quarta tentativa.
- Copie vários candidatos para a área de transferência ou para um arquivo de anotações e compare antes de escolher um.
- Se o Gerador de Loaders CSS permitir exportar, salve os resultados importantes na hora — nada fica guardado no servidor.
- Combine o que sair deste Gerador de Loaders CSS com outras ferramentas (formatadores, visualizadores, verificadores) para lapidar o resultado final.
Perguntas frequentes
Sim. Tudo o que você gera com o Gerador de Loaders CSS é seu e pode ser usado livremente em projetos pessoais ou comerciais, sem precisar dar créditos.
Sim, totalmente gratuito: sem cadastro, sem plano pago e sem marca d'água no resultado.
Em lugar nenhum do nosso lado. O Gerador de Loaders CSS roda no seu navegador e nada é mantido depois que você fecha a aba, então salve localmente o que for importante.
Sim. O Gerador de Loaders CSS traz opções configuráveis para você ajustar o estilo, o tamanho ou o formato conforme a sua necessidade.
O Gerador de Loaders CSS usa aleatoriedade forte e modelos variados, então cada geração tem grande chance de ser única. Para garantir exclusividade em um conjunto grande, faça uma verificação de duplicatas na coleção final.
Sim. A interface é responsiva e funciona em iOS, Android e em todos os navegadores móveis modernos.