The reading progress line tracks your position.

Scroll down to see the editorial progress indicator update. The thin line at the top of the header grows as you read through the content. A clean, editorial touch that signals depth without demanding attention.

This pattern works especially well for long-form editorial content, case studies, and portfolio pieces where communicating reading progress adds value without visual noise.

↑ Near the end of the content.

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: nav-scroll-progress-editorial
import gsap from 'https://esm.sh/gsap@3.12.5';
import { ScrollTrigger } from 'https://esm.sh/gsap@3.12.5/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const bar = document.querySelector('.progress-line');
ScrollTrigger.create({
  start: 'top top', end: 'bottom bottom',
  onUpdate: self => gsap.set(bar, { scaleX: self.progress, transformOrigin: 'left' })
});

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: nav-scroll-progress-editorial -->
<header class="editorial-header">
  <div class="progress-line"></div>
  <nav>...</nav>
</header>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: nav-scroll-progress-editorial */
.editorial-header { position: fixed; top: 0; left: 0; right: 0; background: white; border-bottom: 1px solid rgba(0,0,0,.1); }
.progress-line { height: 2px; background: #0A0A0A; transform: scaleX(0); transform-origin: left; }