Scroll Progress Component

The Scroll Progress component provides a visual indicator of the user’s reading progress through your content. Using modern CSS scroll-driven animations, it creates a smooth, native progress bar that enhances navigation awareness without impacting performance.

There are two variants of the scroll progress component:

ScrollProgressExperimental

Key Features

• Native Performance: Uses CSS scroll-timeline for smooth animations

• Zero JavaScript: Pure CSS implementation for optimal performance

Basic Usage

Add the scroll progress indicator to your page:

1
<ScrollProgressExperimental />

ScrollProgress

Key Features

• Target Element: Uses a target element to calculate the progress
• Full Compatability: Works in all modern browsers

1
<ScrollProgress />

Target Element

The target element is the element that will be used to calculate the progress. Found via querySelector. Defaults to the body element.

1
<ScrollProgress targetQuery="body" />

Best Practices

1. Visual Design

   • Use subtle colors that complement your theme
   • Keep the height minimal to avoid distraction
   • Maintain sufficient contrast for visibility
   • Consider dark mode compatibility

2. Placement

   • Position below the header for consistency
   • Ensure proper z-index layering
   • Account for fixed/sticky elements
   • Consider mobile viewports

3. Implementation

   • Add to long-form content pages
   • Consider disabling on short pages
   • Test across different viewports

Common Use Cases