Palavra que Preenche Ultra
Preloader: o nome da marca apagado vai se enchendo de cor em degraus, como carregamento real; cheio, a tela sobe.
Ver na loja e baixarSobre este efeito
Tela de carregamento com o nome da marca: a palavra aparece apagada e vai se enchendo de cor da esquerda pra direita conforme carrega, em degraus irregulares como um carregamento de verdade, com rajadas e patamares. Cheia, a tela sobe e revela a página, e dispara um evento para o hero entrar. Enche sozinha ou recebe o progresso real por código; direção (esquerda ou de baixo pra cima), número de degraus, esperar o load e tocar uma vez por aba por atributo. Usa a fonte da marca. 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
- Exclusivo de quem assina o Ultra (R$ 39,90/mês).
- Peso
- 4,5 KB de código comprimido. Sem biblioteca externa.
- No celular
- Leve: usa 6% 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.csse oefeito.jse marque o elemento com a classefx-palavra-que-preenche.
Assuntos
- preloader
- loader
- carregamento
- marca
- logo
- texto
- preenchimento
- reveal
- css-puro