SWCore / CSS / Barra de leitura (sw-progresso)

Barra de leitura (sw-progresso) CSS

Uma linha na cor da marca que enche conforme a pessoa lê a página.

O que é

Ótimo para artigo, página de vendas e landing page longa. Um elemento vazio e pronto.

Como funciona

animation-timeline: scroll(root) liga a animação à rolagem da página. Sem suporte, a barra fica escondida. Usa --sw-grad-pri, então segue o motor de cor.

Exemplos

Olhe o topo desta página enquanto rola Ao vivo

A barra fina no topo da janela é esta peça — role a página para ver encher.

<!-- uma vez, logo depois do <body> -->
<div sw-progresso></div>

Atributos

sw-progresso

barra fixa no topo

sw-progresso="baixo"

barra fixa no rodapé

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

swcore.min.css 2.1.0

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

Nenhuma.

← AnteriorEntrar ao rolar (sw-revela) Próximo →Menu, aviso e painel (sw-popover)