Como criar um preloader personalizado no WordPress com logo e cores da marca
Um preloader genérico com spinner azul ou branco não combina com toda identidade visual. Aprenda o que personalizar, como fazer certo e os erros mais comuns que transformam um recurso elegante em uma experiência confusa.
Elementos personalizáveis num preloader
Antes de personalizar, é importante entender o que compõe visualmente um preloader e qual é a função de cada elemento:
| Elemento | Função | Impacto visual |
|---|---|---|
| Cor de fundo | Define o tom geral da tela | Alto |
| Animação | Indica que algo está acontecendo | Alto |
| Cor da animação | Contraste e identidade | Médio-alto |
| Logo | Reforço de marca | Médio |
| Texto | Contexto ou mensagem | Baixo-médio |
| Tamanho da animação | Hierarquia visual | Médio |
Cor de fundo
A cor de fundo do preloader deve ser coerente com a página que está abaixo. Se o seu site tem fundo branco e você usa um preloader com fundo preto, o fade-out vai criar um contraste brusco — a experiência vai parecer quebrada, não polida.
O ideal é usar a mesma cor de fundo do <body> da página — ou uma cor
muito próxima. Isso cria uma transição visualmente suave quando o preloader desaparece.
Exemplos de bom alinhamento:
- Site com fundo
#ffffff→ preloader com fundo#ffffffou#f8f8f8 - Site com tema dark (
#0a0a0f) → preloader com a mesma cor ou mais escuro - Site com fundo colorido → preloader com a cor principal da marca
Animação e cor da animação
A escolha da animação depende do estilo do site. Para um guia completo sobre cada tipo — Spinner, Dots, Progress Bar e Minimal — veja: Qual animação de preloader escolher para WordPress.
A cor da animação deve ter bom contraste com o fundo. Não siga sempre a cor primária da marca — se ela for similar ao fundo, a animação se perde.
Bom contraste geral:
- Fundo escuro → animação clara (branca, amarela, verde neon)
- Fundo claro → animação escura (cinza, azul, cor da marca se contrastante)
- Razão de contraste mínima recomendada: 3:1 (mesmo sendo temporário, importa)
Adicionando o logo
O logo no preloader é uma escolha de identidade visual, não uma necessidade técnica. Antes de adicionar, avalie:
Tamanho do arquivo do logo
Use SVG ou PNG com fundo transparente. Um PNG de 500px × 200px otimizado deve ter menos de 30 KB. Logos em alta resolução sem otimização podem ser maiores que todo o JavaScript da página.
Versão do logo para o fundo escolhido
Se o seu logo principal é escuro (funciona bem em fundos claros), você precisa de uma versão em branco ou com cores invertidas para fundos escuros. Não force o logo padrão em um fundo incompatível.
Posicionamento
O mais comum é centralizar o logo acima da animação. Uma proporção que funciona: o logo com aproximadamente 40–50% da largura da tela (em mobile) e a animação com 20–30px abaixo.
Texto de carregamento
Texto no preloader é opcional. Se usar, mantenha curto (2 a 4 palavras) e evite frases que frustrem a expectativa:
Funciona bem:
- "Carregando…"
- "Aguarde um momento"
- Nome da marca / tagline curta
Evite:
- "Carregando, isso pode demorar um pouco" (cria ansiedade)
- "Por favor, aguarde enquanto nossa equipe prepara sua experiência" (prolixo)
- Porcentagens de progresso que não refletem o progresso real
Tamanho da animação
A maioria dos plugins oferece opções de tamanho: Small, Medium e Large. A regra prática:
- Small (20–30px): para preloaders minimalistas com logo grande em destaque
- Medium (40–60px): o tamanho padrão, funciona na maioria dos casos
- Large (80px+): quando a animação é o elemento central, sem logo
Em mobile, considere usar um tamanho menor do que em desktop — a tela é menor e a animação grande pode parecer desproporcional.
Erros comuns que comprometem a experiência
- Animação sem contraste: spinner branco em fundo quase branco — invisível.
- Logo em alta resolução não otimizado: preloader que demora para carregar por causa do próprio logo.
- Fade-out brusco: transição de 0ms — a sobreposição some abruptamente.
- Cores que mudam entre preloader e página: cria descontinuidade visual.
- Texto muito longo: usuário não tem tempo de ler em 1–2 segundos.
- Sem safety timeout: o preloader trava com recursos lentos.
Boas práticas de UX
Um preloader bem personalizado segue estas regras simples:
- A transição de saída é suave (fade-out entre 300ms e 600ms)
- As cores do preloader são coerentes com a paleta do site
- O logo, se presente, está otimizado e tem boa visibilidade no fundo escolhido
- A animação é visível e indica movimento (feedback ao usuário)
- O safety timeout garante que o preloader nunca bloqueie indefinidamente
Quer personalizar logo, cores e animação sem editar código?
O Smart Preload DL tem painel visual para configurar todos esses elementos diretamente no WordPress Admin, com preview em tempo real.