Pular para o conteúdo
A
Get Pro

Scroll Progress

EfeitosCLI

Barra fina que enche conforme a pessoa rola a página, para artigos, guias e textos longos.

Também no template SaaS Pro. Ver templates Pro →

Ver na vitrine

Instalação

bash
pnpm add aura-ui-effects aura-ui-tailwind

Depois, importe o CSS uma vez no seu arquivo global (Tailwind v4):

css
/* app/globals.css */
@import "aura-ui-tailwind";
@import "aura-ui-effects/tailwind.css";

Uso

tsx
import { ScrollProgress } from "aura-ui-effects/scroll-progress";

Props

Lidas do código do componente: tipo, valor padrão e o que cada uma faz.

PropTipo
scrollContainerRef

Contêiner que rola. Sem ele, a barra acompanha a página e fica fixa no topo da janela; com ele, gruda no topo do contêiner (coloque a barra como primeiro filho).

React.RefObject<HTMLElement | null>
color

Cor da barra (padrão gradient).

Padrão: "gradient"

ScrollProgressColor
size

Espessura em px (padrão 3).

Padrão: 3

number

Também aceita as props de Omit<React.HTMLAttributes<HTMLDivElement>, "children">.

API

Exportações

scrollFractionScrollProgress

Tipos

ScrollProgressColorScrollProgressProps

Código-fonte

É exatamente o arquivo que o CLI copia para o seu projeto — edite à vontade.