Scroll Progress
ScrollProgress renders a thin progress bar fixed to the top of the viewport that fills as the user scrolls down the page.
Basic usage
Add it once at the top of your layout or page. It attaches to window.scroll automatically.
vue
<template>
<ScrollProgress />
<main>...</main>
</template>Custom color
vue
<ScrollProgress color="#10b981" />Custom height
vue
<ScrollProgress height="5px" />Non-fixed (absolute)
Set :fixed="false" to position relative to the nearest positioned ancestor rather than the viewport.
vue
<ScrollProgress :fixed="false" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | var(--color-primary) | Bar fill color |
height | string | '3px' | Bar height |
zIndex | number | 9999 | CSS z-index |
fixed | boolean | true | Fixed to viewport top when true, absolute otherwise |