Preloader JavaScript

O que é

É aquela tela que aparece por um instante enquanto o site abre, para a pessoa não ver a página se montando aos pedaços. Com <div sw-pre> no começo do <body>, ela cobre a tela inteira e desaparece com um esmaecer quando a página termina de carregar (fotos e fontes incluídas). Com a palavra box, ela cobre só um pedaço — um painel, um cartão, uma tabela — enquanto os dados daquele pedaço chegam.

Você escolhe o visual com palavras dentro do atributo, que podem ser combinadas: drk (fundo escuro), pri (fundo na cor do site), bar (barrinha no topo em vez do círculo) e box (cobre só o pai, não a tela). Dentro, coloque o indicador que quiser: o círculo (.sw-spinner), os três pontinhos (.sw-pre-dots) e/ou um texto (.sw-pre-lbl). A logo entra sozinha com sw-pre-logo. Vem no arquivo principal.

Quando usar

• Site com muita foto ou vídeo no topo: a tela cheia esconde a montagem da página.
• Pedaço da página que busca dados (tabela, painel, lista): sw-pre="box" só naquele pedaço, e o resto continua usável.
• Evite em site leve: se a página abre rápido, a tela de carregando só atrasa a pessoa.

Comece aqui

1. 1

   Coloque o SW Core na página (CSS no <head>, JS no fim do <body>).

   <link rel="stylesheet" href="swcore/swcore.min.css">
   
   <!-- fim do <body> -->
   <script src="swcore/swcore.min.js"></script>

2. 2

   Para a tela cheia: logo no começo do <body>, antes de todo o conteúdo. Ela some sozinha quando a página termina de carregar. (Não mostramos ao vivo aqui porque cobriria esta documentação.)

   <body>
     <div sw-pre sw-pre-logo="/img/logo.webp">
       <div class="sw-spinner"></div>
     </div>
   
     …resto da página…
   </body>

3. 3

   Para cobrir só um pedaço, acrescente box. Ele ocupa o elemento pai inteiro (aqui, esta caixa):

   Pedidos de hoje

   Carregando a lista…

   <div class="p-m">
     <strong>Pedidos de hoje</strong>
     <p>Carregando a lista…</p>
     <div sw-pre="box"><div class="sw-spinner"></div></div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<body>
  <div sw-pre="drk" sw-pre-logo="/img/logo-branca.webp">
    <div class="sw-spinner"></div>
  </div>

  <header>…</header>
  <main>…</main>
</body>

<!-- some sozinho ~0,15 s depois de a página terminar de carregar (fotos e fontes incluídas) -->

<div class="bd r-m p-m" id="cartao-faturamento">
  <strong>Faturamento do mês</strong>
  <p class="t-xg fw7 m-0" id="valor">—</p>
  <div sw-pre="box"><div class="sw-pre-dots"><span></span><span></span><span></span></div></div>
</div>

<script>
  fetch('/api/faturamento')
    .then((r) => r.json())
    .then((d) => {
      document.getElementById('valor').textContent = d.total;
      SW.Pre.hide('#cartao-faturamento');   // tira o carregando
    });
</script>

<!-- quando o sw-ajax coloca o conteúdo novo no alvo, o carregando que estava lá é apagado junto -->
<button sw-ajax="/pedidos/lista" sw-target="#lista">Atualizar</button>

<div id="lista">
  <div sw-pre="box"><div class="sw-spinner"></div></div>
</div>

<script>
  fetch('/api/destaques')
    .then((r) => r.json())
    .then(() => SW.Pre.hide('[sw-pre]'));   // não espera as fotos terminarem
</script>

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js — já vem no pacote principal.

Cuidados — erros comuns

• SW.Pre.hide() sem nada dentro esconde todos os carregandos da página. Para um só, diga qual: SW.Pre.hide('#painel').
• O modo box nunca some sozinho: esqueceu de chamar SW.Pre.hide, o pedaço fica coberto para sempre.
• A tela cheia espera todas as fotos e fontes. Em página pesada a pessoa espera demais — esconda antes com SW.Pre.hide('[sw-pre]') quando o essencial chegar.
• Use só um de tela cheia por página, e no começo do <body>. Colocado no fim, a página aparece antes dele.
• Sem nada dentro (sem .sw-spinner, pontinhos ou texto) aparece só o fundo liso — parece que a página travou.

O que ele não faz

• Não mostra a porcentagem real do carregamento: o círculo e a barra só indicam "aguarde".
• Quando a página foi aberta por uma transição de página do sw-trans, o de tela cheia é removido na hora (a transição já cumpre esse papel).