# Scroll Progress

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

Source: https://www.motion-components.dev/docs/recipes/scroll-progress/

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

## Complete code

```html
<!-- 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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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.