Scroll Progress Indicator (barra de progreso de lectura)

Una barra se llena de izquierda a derecha en proporción al avance de la tarea.

Añade una barra de progreso determinada (Determinate Progress Bar, también llamada progress bar fill o progress indicator) en [dónde].
La barra debe llenarse de izquierda a derecha al ritmo del progreso real, con transiciones suaves entre actualizaciones, y mostrar el porcentaje a su lado.
Usa la semántica correcta de barra de progreso con valores actual, mínimo y máximo para que los lectores de pantalla puedan leerla, y nunca dejes que el relleno retroceda.

Una barra fina en la parte superior de la página avanza poco a poco durante la navegación y se completa al cargar.

Añade una "Top Loading Bar" (también llamada page progress bar) en [dónde].
Una barra fina en el borde superior debe avanzar rápido al principio y luego cada vez más despacio mientras carga la página; cuando termine, debe correr hasta el final y desvanecerse.
Nunca dejes que llegue al final antes de que la carga termine de verdad, y evita que tape o desplace el contenido de la página.

Un arco crece alrededor de un anillo para mostrar el porcentaje completado.

Añade un "Progress Ring" (también llamado circular progress o radial progress) en [dónde].
Empezando arriba, un arco debe crecer en el sentido de las agujas del reloj alrededor del anillo para mostrar el porcentaje completado, frenando suavemente al asentarse, mientras el número del centro sube a la par.
Mantén sincronizados el arco y el número, y expón el valor con la semántica correcta de barra de progreso para lectores de pantalla.

El desplazamiento se detiene en puntos de ajuste definidos, como diapositivas o secciones.

Añade "Scroll Snap" (también llamado scroll snapping o snap scrolling) en [dónde].
Cuando el scroll se detenga, la vista debe asentarse limpiamente en la sección más cercana para que cada una quede alineada con el borde en lugar de pararse a medias.
Usa el ajuste nativo del navegador para que el scroll con rueda, táctil y teclado siga funcionando, y asegúrate de que el contenido más alto que la pantalla se pueda leer entero.

El progreso de la animación está ligado directamente a la posición del scroll, así que al avanzar o retroceder se reproduce o se rebobina.

Añade una "Scroll-Linked Animation" (también llamada scroll-driven animation o scroll scrub) en [dónde].
La animación debe moverse exactamente con la posición del scroll: al bajar avanza y al subir se rebobina al instante, sin un suavizado temporal propio.
Asigna toda la animación a un tramo de scroll claro y muestra un estado estático razonable si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una animación se reproduce una vez cuando un elemento entra o sale del viewport.

Añade una "Scroll-Triggered Animation" (también llamada reveal on scroll o animate on scroll) en [dónde].
Cada elemento debe aparecer con un fundido y subir a su sitio una sola vez al entrar en pantalla, a su propio ritmo rápido y suave en lugar de seguir la posición del scroll.
Mantén el contenido visible si los scripts no cargan y muestra los elementos de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).