Gota Líquida Plus

Preloader: uma gota de vidro líquido com cores se movendo por dentro morfa e gira; pronta a página, ela engole a tela.

Sobre este efeito

Tela de carregamento com uma gota de vidro líquido morfando no centro, com três manchas de cor se movendo por dentro, um halo colorido atrás, reflexos na borda e no topo, girando devagar. Quando a página está pronta, a gota cresce até engolir a tela inteira e a tela se dissolve, revelando o site; dispara um evento para o hero entrar. Também funciona solta, como spinner dentro de botão ou seção. Três cores, tamanho, ritmo, giro, brilho, tempo mínimo e durações ajustáveis; rótulo, esperar o load e tocar uma vez por aba por atributo. 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: Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).
Peso: 5,1 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 9% 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-gota-liquida.

Assuntos

preloader
loader
carregamento
gota
blob
liquido
spinner
reveal
css-puro
vidro