Scroll Progress

A fixed progress bar that tracks scroll position with spring physics, combined with parallax sections and reveal entrances.

Preview

Complete code

<!-- Fixed progress bar at the top -->
<motion-progress position="top" thickness="3" style="--mc-progress-color: #60a5fa" />

<!-- Page content with scroll effects -->
<section>
  <motion-reveal y="24" duration="0.6">
    <h2>Features</h2>
    <p>Content that fades in on scroll.</p>
  </motion-reveal>
</section>

<section>
  <motion-parallax depth="0.3">
    <img src="hero.jpg" alt="..." />
  </motion-parallax>
</section>

<section>
  <motion-reveal y="24" duration="0.6">
    <h2>Pricing</h2>
    <p>More content that reveals on scroll.</p>
  </motion-reveal>
</section>

How it works

Progress bar

<motion-progress position="top" thickness="3" style="--mc-progress-color: #60a5fa" />

The progress bar is a fixed element that fills as you scroll. It uses a spring-eased scaleX transform, so the fill feels physical rather than linear. position places it at "top" or "bottom".

Parallax

<motion-parallax depth="0.3">
  <img src="hero.jpg" alt="..." />
</motion-parallax>

depth controls how far the content drifts relative to the scroll. At 0.3 it moves at 30% of the scroll speed, which reads as depth. Use axis="x" for horizontal parallax.

Reveal entrances

<motion-reveal y="24" duration="0.6">
  <div>Content that fades in.</div>
</motion-reveal>

Reveals fire when the element enters the viewport via IntersectionObserver. They work at any scroll position, not just the initial load.

Tuning

Heavier parallax

<motion-parallax depth="0.6">
  <img src="hero.jpg" alt="..." />
</motion-parallax>

Higher speed values create a more pronounced depth effect. At 0.6 the content noticeably lags behind the scroll.

Custom progress color

<motion-progress
  position="top"
  thickness="3" style="--mc-progress-color: linear-gradient(90deg, #60a5fa, #a78bfa)"
/>

The color attribute accepts any CSS color value, including gradients.

Accessibility

The progress bar is decorative and hidden from screen readers via aria-hidden. Parallax and reveal components respect prefers-reduced-motion: parallax becomes static and reveals fire instantly.