Gerador de Loaders CSS
Spinners, dots e barras de carregamento feitos 100% em CSS puro.
Propriedades CSS utilizadas
Loaders 100% CSSTodos os três estilos são construídos apenas com divs, border-radius, transform e @keyframes — sem imagens, SVG ou JavaScript de animação.
animation-delay escalonadoAplicar um pequeno atraso diferente em cada ponto/barra cria o efeito de onda característico dos loaders do tipo 'dots' e 'bars'.
Perguntas frequentes
Todos são extremamente leves — a diferença de performance entre eles é desprezível; escolha pelo estilo visual mais adequado ao seu produto.
Envolva o loader em um container com display:flex; align-items:center; justify-content:center; e min-height:100vh.
Recomendamos envolver a animação em @media (prefers-reduced-motion: no-preference) e usar um estado estático como fallback para quem desativou animações.
Ferramentas relacionadas
Gerador de Animações (@keyframes)
Escolha um preset de animação, ajuste duração e timing, e copie o @keyframes pronto.
Gerador de Transitions
Configure propriedade, duração, easing e delay para transições suaves.
Gerador de Hover Effects
Efeitos de hover prontos — elevação, brilho, borda animada — para aplicar em qualquer elemento.