Preloader Componentes

Tela de carregamento cheia — logo/spinner até o resto da página ficar pronto.

O que é

Cobre a tela inteira enquanto a página carrega, e some com uma transição suave quando tudo estiver pronto (window.load).

Como funciona

É tela cheia de propósito, então não dá pra "ligar de verdade" dentro de uma página de demonstração comum (cobriria tudo) — veja o efeito isolado na própria implementação.

Exemplos

Dentro de uma caixa (box) — dá pra ver funcionando Ao vivo

Conteúdo do painel

O preloader abaixo está cobrindo só esta caixa, porque tem o token box.

<!-- o pai precisa de position:relative -->
<div class="rel" style="height:30rem">
  <div>…conteúdo da área…</div>
  <div sw-pre="box"><div class="sw-spinner"></div></div>
</div>

<!-- "box" é o único que dá pra usar sem cobrir a página inteira -->

Cores — padrão, escuro e primária Ao vivo

Da esquerda pra direita: padrão, drk e pri.

<div sw-pre>…</div>        <!-- claro (padrão) -->
<div sw-pre="drk">…</div>   <!-- escuro -->
<div sw-pre="pri">…</div>   <!-- cor primária -->

Barra no topo em vez de spinner Ao vivo

Com bar, o indicador é uma barra fininha no topo.

<div sw-pre="bar"></div>

<!-- combinando -->
<div sw-pre="drk bar"></div>

Tela cheia de verdade — o uso normal Ao vivo

Sem o token box ele cobre a tela inteira e some sozinho no window.load — por isso não dá pra demonstrar aqui dentro sem tapar a documentação.

Ponha logo no começo do <body>, antes do conteúdo.

<body>
  <div sw-pre sw-pre-logo="/img/logo.svg" sw-pre-bg="#0f172a">
    <div class="sw-spinner"></div>
  </div>

  …resto da página…
</body>

<!-- some sozinho quando tudo termina de carregar (window.load) -->

<!-- ou no seu tempo: -->
<script>
  fetch('/api/dados')
    .then(r => r.json())
    .then(() => SW.Pre.hide());
</script>

Atributos

sw-pre-logo

caminho de uma logo — ele injeta a <img> sozinho

sw-pre-bg

fundo livre: cor, degradê ou imagem

Variantes

(sem valor)

tela cheia, fundo claro, spinner no centro

drk

fundo escuro

pri

fundo na cor primária

bar

barra de progresso no topo, no lugar do spinner central

box

preenche só o elemento PAI, em vez da tela inteira

drk bar

os tokens se combinam

Eventos

Nenhum.

API (JavaScript)

SW.Pre.hide()

esconde antes da hora (ex.: seus dados já chegaram)

SW.Pre.show()

mostra de novo — útil entre telas de um app

Requisitos

Nenhuma.

Limitações — o que ele não faz

Sem o token box ele é tela cheia: use um por página, no topo do <body>.
Ele some no window.load, que espera imagens e fontes. Se a sua página tem mídia pesada, chame SW.Pre.hide() você mesmo no momento certo, senão o visitante espera demais.

← AnteriorLazy load de imagem Próximo →Efeitos de entrada