Scroll Progress

Indicate how far a user has scrolled on a page

npm run add ScrollProgress

Use the ScrollProgress component to visually indicate how far a user has scrolled on a page. They:

• Improves readability: Helps users gauge their position in long-form content.
• Encourages completion: Progress indicators motivate users to finish reading or scrolling.
• Enhances UX: Provides subtle feedback without disrupting content flow.

<ScrollProgress
    colorFrom="var(--w-color-info)"
    colorTo="var(--w-color-success)"
/>

The ScrollProgress component can be used on its own, in which case the primary color will be used. You can however, configure custom colors or even a gradient using the colorFrom and colorTo props.

By default, it’ll have a 2px height positioned at the very top of the page. These values can also be configured using the top and size props:

<ScrollProgress
    top={50} {/* For example, display under a menu 50px from the top */}
    size={5} {/* Increases height from 2px to 5px */}
/>

Configuration with CSS

If you would like to keep global component configuration in one place, you can also set the above props through the following CSS variables:

html body {
    --w-scroll-progress-top: 0;
    --w-scroll-progress-size: 2px;
    --w-scroll-progress-color-from: var(--w-color-primary);
    --w-scroll-progress-color-to: var(--w-color-primary);
}

API

type ScrollProgressProps = {
    top?: number
    size?: number
    colorFrom?: string
    colorTo?: string
    rounded?: boolean
    className?: string
}