Contagem de Abertura Plus

Sobre este efeito

Tela de carregamento em que o número é o protagonista: uma porcentagem grande conta no canto de baixo, um ponto por vez, até 100%. Aí uma cortina sobe recortando o número de baixo pra cima e, quando ela termina, a página sobe 100 px e aparece. A contagem anda sempre no mesmo ritmo, mas não passa do que já carregou de verdade: segura em 99% até o load da página, pode acompanhar as imagens que já chegaram ou o progresso que você mandar por código, e nunca pula de 20% pra 80%. Ritmo de 20 ms por ponto, pausa no 100%, cortina de 400 ms e entrada de 600 ms. Escolha o que ela revela, o sufixo, o tamanho e a cor do número; eventos de pronto e de fim; trava a rolagem enquanto está no ar e sai limpa da página no fim. Sem biblioteca: o JS conta, a cortina e a entrada são transições de CSS.

Ficha

Categoria

Carregamento

Onde combina

utilitário, transições

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

4,9 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 8% do processador de um celular intermediário enquanto anima.

Na loja desde

13/09/2026

Como colocar no seu site

1. 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.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-contagem-de-abertura.

Assuntos

• preloader
• loader
• carregamento
• porcentagem
• contador
• progresso
• cortina
• recorte
• clip-path
• revelar-pagina
• tipografia