El contexto es todo.
El visitante promedio no termina de leer una landing. Y no es porque sea malo el copy — es porque no sabe cuánto le falta. Cuando una página se siente infinita, el cerebro decide bailar para otro lado.
La barra de progreso resuelve eso con una pista visual constante. No promete brevedad ni se mete con el contenido — simplemente le dice al lector "estás aquí, te falta esto". El cerebro lo procesa subconscientemente y decide quedarse.
Dos formatos, una idea.
Aquí ves las dos variantes más comunes: la barra horizontal en el tope (delgada, dorada, casi imperceptible hasta que la buscas) y el círculo flotante en la esquina (más amigable, con porcentaje legible).
Las dos se calculan con la misma fórmula: scroll actual / (alto del documento − alto del viewport). Eso da un número entre 0 y 1, que se traduce en scaleX para la barra y en stroke-dashoffset para el círculo.
Cuándo conviene.
Para landings tipo este lab — donde el lector necesita un mapa mental — funciona perfecto. Para sitios de servicios cortos donde todo cabe en dos viewport heights, no agrega valor; ahí solo distrae.
La regla rápida: si tu página supera los 3 viewport heights de scroll, vale la pena. Si no, déjalo fuera. La medida correcta no es el efecto sino la utilidad.
Performance real.
El listener de scroll usa passive: true para no bloquear el hilo principal. Las actualizaciones se aplican vía CSS variables (--p) en lugar de mutar el DOM, lo que mantiene el navegador feliz incluso en celulares baratos. Total: ~20 líneas de JavaScript, cero dependencias.
El truco extra: el círculo flotante usa un SVG con stroke-dasharray + stroke-dashoffset calculados como variables CSS. La animación corre en GPU sin re-renders.
Lo importante.
Es uno de esos detalles que el visitante no nota conscientemente, pero que sí cambia la percepción del sitio. Como un tipo de letra bien elegida o un margen consistente: invisible cuando está bien, evidente cuando falta.