Pontos que Quicam Free

Tela de carregamento: quatro bolinhas quicam em fila com peso de verdade, achatam no pouso e soltam um anel no chão.

Sobre este efeito

Tela de carregamento com quatro bolinhas quicando em fila, uma atrás da outra. Cada uma sobe com peso (desacelera no alto, acelera na descida), achata ao pousar, solta um anel no chão e tem uma sombra que respira embaixo. Passado o tempo mínimo (e o load, se pedido), os pontos caem, a tela se dissolve e dispara um evento pro hero entrar. Também funciona solta, inline, como indicador de carregamento em botão ou lista. Cores, tamanho, espaço, altura do pulo, ciclo, defasagem, achatamento, anel, sombra e brilho ajustáveis; quantidade de pontos por atributo. Só CSS, sem biblioteca.

Ficha

Categoria: Carregamento
Onde combina: utilitário, transições, topo (hero)
Alcance: Página inteira: depende da rolagem ou do cursor da página toda.
Plano: Grátis com a conta: 1 download a cada 24 horas.
Peso: 4,7 KB de código comprimido. Sem biblioteca externa.
No celular: Moderado: usa 22% do processador de um celular intermediário enquanto anima.
Na loja desde: 04/09/2026

Como colocar no seu site

Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-pontos-que-quicam.

Assuntos

preloader
loader
carregamento
pontos
bounce
quicar
spinner
indicador
css-puro