Progress Bar dependiente del Scroll
Solución
<style>
#bar{
width: 0;
height: 8px;
background: red;
position: fixed;
}
</style>
<body style="height: 200vh" data-sb-target="bar" >
<div id="bar"></div>
<div>Desplaza esta pagina hacia abajo con la barra de scroll lateral para ver el efecto en funcionamiento</div>
<script>
/*Progress bar de ancho según scroll*/
window.addEventListener("scroll", ()=>{
const element = document.documentElement;
const progressBar = document.getElementById(document.body.dataset.sbTarget);
const percentage = Math.round(100*element.scrollTop/(element.scrollHeight - element.clientHeight));
progressBar.style.width = percentage+"%";
});
</script>
</body>
Explicación
La idea básica de esta aplicación es combinar código javascript con estilos CSS. Aunque javascript puede genear y controlar animaciones, he usado esta forma para ilustrar como javascript y css pueden trabajar juntos. Además queda algo muy simple.
La barra se construye con un bloque div vacio. Le asignamos un atributo id para identficarla y modificar su anchura
Definimos un estilo para la barra para configurar el color de la barra mediante background y su alto, en el ejmeplo el color es rojo y el alto 8px. Como en la página se hará un scroll le colocamos la position en fixed, para que no se mueva. También puede ponerse en sticky con el correspondiente valor de top si queremos que colocar la barra en alguna posición concreta
En este ejemplo la barra está en el borde superior de la ventana
Una vez creada la barra pasamos a la animación. Se trata de que al hacer scroll la barra crezca o decrezca. Para esto susamo un evento scroll en window
El controlador del evento calcula el máximo que sube la página por encima del borde superior del viewport, será la altura total del documento menos la altura del viewport: element.scrollHeight - element.clientHeight. Es el scroll máximo
El scroll actual del documento viene dado por scrollTop. Se calcula el porcentaje recorrido por el documento en forma de porcentaje (100*scrollactual/máximoscroll)
Solo queda aplicar este valor al ancho de la barra que seleccionamos por su id leído desde un atributo data-sb-target del elemento body. Así la barra tendrá un ancho de 0 al 100%, porcentaje sobre su contenedor.
En el ejemplo body tiene una altura doble que el viewport para que se puede hacer scroll