Gerador de Loaders CSS
Gerador de loaders CSS grátis: dez spinners de carregamento em CSS puro com controle ao vivo de tamanho, velocidade, espessura e cor, e cópia de HTML e CSS prontos para colar.
O que o gerador de loaders CSS cria?
Ele constrói indicadores de carregamento animados em CSS puro: anel, pontos, barras, ondulação, pulso, órbita, virar, onda, salto e anel gradiente. Cada um é gerado com o tamanho, velocidade, espessura e cor escolhidos, pronto para copiar como HTML mais CSS.
Os loaders precisam de JavaScript ou imagens?
Não. Cada loader são elementos HTML simples animados com keyframes de CSS. Sem imagens, sem fontes de ícones, sem bibliotecas e sem scripts em tempo de execução — só o bloco CSS basta.
Como adiciono um loader ao meu site?
Clique em um loader na grade, copie o bloco HTML para onde o loader deve aparecer e cole o bloco CSS na sua folha de estilos. O CSS é autocontido e inclui as regras @keyframes necessárias.
O que os quatro parâmetros mudam?
Tamanho controla a largura e altura de todos os loaders, Velocidade muda a duração da animação, Espessura afeta bordas e larguras das barras, e Cor repinta instantaneamente todos os elementos da grade e do código.
Por que meu loader copiado não anima?
A causa mais comum é copiar apenas as regras de classe sem o bloco @keyframes, ou renomear a classe no HTML mas não no CSS. Copie os dois blocos como gerados e mantenha os nomes das classes.
As animações são performáticas?
Sim. Todos os loaders animam apenas transform e opacity, propriedades que o navegador compõe na GPU sem disparar layout ou pintura, então continuam fluidos mesmo com vários loaders na página.
Os loaders são acessíveis?
Spinners são decoração visual, então leitores de tela se beneficiam de uma dica em texto. Adicione um rótulo oculto como "Carregando" perto do loader, ou use aria-hidden="true" no loader e anuncie o progresso separadamente.
Algo é enviado a um servidor?
Não. O gerador roda inteiramente no seu navegador. Suas configurações nunca saem da página e o código gerado é montado localmente no seu dispositivo.
Como usar Gerador de Loaders CSS
O gerador de loaders CSS constrói indicadores de carregamento animados em CSS puro — sem imagens, sem JavaScript, sem dependências. Escolha um dos dez estilos, ajuste tamanho, velocidade, espessura e cor, e copie o HTML e o CSS gerados direto para o seu projeto.
- Ajuste os parâmetros globais com os quatro controles: Tamanho define a caixa de cada loader, Velocidade muda a duração da animação, Espessura controla bordas e larguras das barras, e Cor pinta cada elemento.
- Navegue pela grade: os dez loaders seguem animados ao vivo com suas configurações atuais, para comparar de relance. Clique em qualquer loader para selecioná-lo.
- O painel de detalhes mostra o loader selecionado maior, junto com o trecho de HTML e o CSS correspondente (incluindo os @keyframes de que precisa).
- Pressione Copiar HTML ou Copiar CSS para enviar cada bloco à área de transferência. O CSS é autocontido — cole-o na sua folha de estilos e coloque o HTML onde o loader deve aparecer.
- Mude qualquer parâmetro e a grade, a prévia de detalhes e os dois blocos de código atualizam instantaneamente.
Por serem CSS puro, os loaders custam quase nada de banda e continuam nítidos em qualquer tela. Acompanhe a animação com um rótulo de texto por acessibilidade e evite durações abaixo de cerca de 0,5 s: indicadores que piscam rápido demais causam mais inquietação do que tranquilidade.
Ferramentas relacionadas
- Minificador CSS Minificador CSS online gratuito. Comprima e otimize código CSS instantaneamente removendo espaços, comentários e caracteres desnecessários. Reduza o tamanho do arquivo para melhor desempenho web.
- Embelezador CSS Formate e embeleze código CSS instantaneamente. Converta CSS minificado em código legível e bem indentado com opções personalizáveis.
- Gerador de Border Radius Criativo Gerador de border radius criativo gratuito online. Arraste 8 pontos ou escolha uma forma blob para criar figuras CSS orgânicas e copiar o código na hora.
- Conversor de Cor Conversor de cor online gratuito. Converta formatos HEX, RGB, HSL, HSV instantaneamente com seletor visual. 100% privado, funciona no seu navegador.
- Gerador de Easing CSS Gerador online gratuito de easing CSS. Arraste os pontos de controle do cubic-bezier em uma curva interativa, escolha entre 18 presets, veja uma animação de bola em loop e copie a função de temporização na hora.
- Gerador de Text Shadow CSS Gerador online gratuito de text-shadow CSS. Empilhe várias camadas de sombra com deslocamento, desfoque, cor e opacidade, teste presets como Neon, 3D ou Retrô e copie o CSS na hora.
- Gerador de Clip Path CSS Gerador online gratuito de clip-path CSS. Crie formas polygon, circle, ellipse e inset com pontos arrastáveis, visualização ao vivo e cópia do código CSS em um clique.
- Gerador de Border Radius CSS Gerador visual de border-radius CSS. Ajuste cada canto independentemente com pré-visualização em tempo real e copie o código CSS instantaneamente.