Barra de leitura (sw-progresso) CSS

O que é

É a barrinha que aparece no topo de blogs e páginas de venda mostrando "quanto falta para terminar". Você coloca <div sw-progresso></div> uma vez na página e ela fica presa no topo da janela, enchendo da esquerda para a direita enquanto a pessoa rola. Com sw-progresso="baixo" ela fica no rodapé da janela.

O navegador liga a barra à rolagem da página inteira: 0% no topo, 100% no fim. A cor é o degradê da cor primária do site — trocou a cor da marca, a barra acompanha. Ela fica por cima do menu fixo e não atrapalha o clique em nada. Em navegador sem esse recurso, a barra simplesmente não aparece.

Quando usar

• Artigo de blog, notícia ou tutorial: mostra quanto falta para acabar e segura a leitura.
• Página de vendas longa: dá sensação de avanço até o botão de compra.
• Termos de uso, contrato, política: a pessoa sabe o tamanho do que está lendo.
• Não use em página curta (que cabe numa tela): a barra quase não se mexe.

Comece aqui

1. 1

   Coloque o SW Core no <head>. O sw-progresso está no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Coloque a barra uma vez, logo depois de abrir o <body>. Pronto — esta página já tem uma: olhe o topo da janela e role.

   <body>
     <div sw-progresso></div>
     …o resto da página…
   </body>

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.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <link rel="stylesheet" href="swcore/swcore.min.css">
</head>
<body>
  <div sw-progresso></div>

  <article>
    <h1>Como escolher o corte ideal para o seu rosto</h1>
    <p>…texto longo do artigo…</p>
  </article>
</body>
</html>

<!-- página de Black Friday: a barra fica embaixo e na cor laranja,
     sem mudar a cor do resto do site -->
<div sw-progresso="baixo" sw-cor="laranja"></div>

<!-- a barra fica por cima do menu fixo sozinha (camada acima da navbar):
     não precisa ajustar nada -->
<div sw-progresso></div>
<nav sw-navbar>…</nav>
<main>…</main>

Precisa de quê

• swcore.min.css (2.1.0 ou mais novo). Não precisa de JavaScript.
• Navegador com "animações ligadas à rolagem". Sem isso, a barra fica escondida (não aparece quebrada).

Cuidados — erros comuns

• Coloque uma barra por página. Duas no topo ficam uma em cima da outra.
• Ela mede a rolagem da página inteira. Se o seu layout rola dentro de uma caixa (painel com ovy, por exemplo), a barra não se mexe.
• A div fica vazia: não escreva texto dentro dela.
• Se a barra não aparece em nenhum navegador, confira se o elemento não está dentro de algo com transform ou filter — isso "prende" o elemento fixo dentro daquela caixa. O lugar certo é logo depois do <body>.

O que ele não faz

• A altura (4 px) e o degradê são fixos; não há classe para barra mais grossa.
• Não mostra porcentagem em número — é só a barra.