⏳ Dev

Gerador de Loader CSS

Crie spinners e loaders em CSS puro com 8 estilos (anel, pontos, pulso, barras, etc.). Ajuste cor, tamanho e velocidade. Sem libs, sem GIFs. Tudo no navegador.

Preview

Estilo

Tamanho (px) 60px Velocidade (s) 1.2s Cor primária Espessura (px) 6px

CSS + HTML

CSS puro, zero JS

Todos os loaders deste gerador usam apenas @keyframes e propriedades CSS — sem GIFs, SVGs ou bibliotecas. Funcionam em qualquer browser moderno e ficam suaves em qualquer DPI.

Cada estilo gera o HTML mínimo e o CSS completo (incluindo animação). Cole no seu projeto e ajuste cor/tamanho via variáveis ou substituindo os valores. Tudo no navegador.

Spinners e loaders em CSS puro

O indicador girando enquanto a página carrega não precisa ser um GIF pesado nem uma biblioteca a mais. Dá pra resolver com CSS puro, leve e nítido em qualquer resolução. Este gerador cria spinners e loaders animados e ainda traz vários estilos prontos pra você escolher.

São oito estilos diferentes: anel, pontos, pulso, barras, entre outros. Você ajusta a cor, o tamanho e a velocidade da animação até bater com a sua interface. Feito isso, é só copiar o CSS, que vem sem dependências externas e sem imagens.

A geração toda fica no navegador. É um caminho prático pra colocar um indicador de carregamento bonito no site mantendo o código leve e sob o seu controle.

Perguntas frequentes

Mudei a espessura e o loader não mexeu. Por que isso acontece?

Porque a espessura só vale em cinco dos oito estilos: anel, anel duplo, spinner, onda e barras (onde ela vira a largura de cada barra). Pontos, pulso e reticências são feitos de círculos preenchidos, cujo diâmetro sai de uma fração do controle de tamanho — um quarto nos pontos, um quinto nas reticências. Nesses três, quem engorda a animação é o controle de tamanho, que vai de 20 a 120 pixels e começa em 60.

Dá para trocar a cor cinza que aparece atrás do anel?

No gerador não, mas é fácil no código. O estilo anel usa #e5e7eb fixo na borda inteira e aplica a cor escolhida só no border-top-color, que é o pedaço que gira. Troque esse valor depois de colar e pronto. Já o anel duplo não tem cinza nenhum: a borda é transparent e apenas o topo e a base recebem a sua cor, então o fundo da página aparece por baixo dos dois lados vazios.

O que significa o animation-delay negativo no CSS dos pontos e das barras?

É o truque que faz as peças começarem fora de sincronia. Um atraso negativo manda o navegador tratar a animação como se ela já estivesse rodando há aquele tempo, então nenhuma peça fica parada esperando a vez no primeiro ciclo. Nos pontos os valores são fixos em -0.32s e -0.16s; nas barras eles acompanham a velocidade escolhida, em 75%, 50% e 25% da duração, que por padrão é 1,2 segundo.

Ferramentas Relacionadas

〰️

Gerador Cubic Bezier

Crie e visualize curvas cubic-bezier para animações CSS. Arraste os pontos de controle, veja o preview da animação e copie o valor pronto. Inclui presets (ease, ease-in, ease-out). Tudo no navegador.

▲

Gerador de Triângulo CSS

Crie triângulos puros com CSS usando o truque das bordas. Escolha direção (cima, baixo, esquerda, direita), tamanho e cor. Útil para tooltips, setas e ponteiros. Tudo no navegador.

🪟

Gerador de Glassmorphism CSS

Crie efeitos de vidro fosco (glassmorphism) com backdrop-filter, transparência e bordas. Ajuste blur, saturação e opacidade. Veja o preview em tempo real e copie o CSS. Tudo no navegador.

🔘

Gerador de Botão CSS

Crie botões CSS customizados: cor, texto, padding, border-radius, sombra e hover. Veja o preview em tempo real e copie o HTML+CSS pronto para colar no projeto. Tudo no navegador.

⬜

Gerador de Border Radius CSS

Crie formas arredondadas customizadas com 8 controles independentes (4 cantos × 2 eixos). Veja o preview em tempo real e copie o CSS pronto. Tudo no navegador.

📦

Compressor CSS (Minify)

Minifica CSS removendo comentários, espaços extras e quebras de linha. Reduz tamanho do arquivo sem alterar comportamento.