JS Module
Preloader Y2Pre
Tela de carregamento que cobre a página inteira e some automaticamente após
window.load - spinner, dots, barra de progresso ou conteúdo customizado.
1. Demo - Clique para simular
Cada botão mostra o preloader por 2 segundos e depois o remove com animação.
2. Uso Básico
Coloque o elemento com y2pre como primeiro filho do
<body>. Ele cobre toda a tela até window.load disparar e depois
some.
3. Variações
4. Como Funciona
O preloader fica visível enquanto a página carrega. Quando tudo estiver pronto
(window.load), o Y2Pre adiciona .is-out - que dispara a animação de saída
-
e depois remove o elemento do DOM.
1
Página começa a carregar - preloader já está no HTML cobrindo tudo
2
CSS, JS, imagens carregam por baixo (invisíveis)
3
window.load dispara - +200ms - .is-out adicionado
4
Animação de saída (450ms) - elemento removido do DOM
Quick Reference
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
y2pre |
div | Ativa o preloader - removido após window.load |
.is-out |
div | Adicionado automaticamente para disparar saída |
.is-drk |
div | Fundo escuro (#0f0f0f) |
.is-pri |
div | Fundo na cor prim�ria do tema |
.is-bar |
div | Apenas barra de progresso animada no topo (fundo transparente) |
.y2pre-spn |
div | Spinner circular animado |
.y2pre-dots |
div | 3 dots animados - adicionar 3 <span> filhos |
.y2pre-lbl |
p | Texto abaixo do spinner/dots |