Scroll (lectura) Indicador de progreso en Vanilla JavaScript-scrollprogressJS

Vista prévia

Descripción

Sin embargo, otra biblioteca de JavaScript para crear una barra de progreso (o inferior) pegajosa que se puede utilizar para visualizar la posición de desplazamiento actual (progreso de lectura) en la Página Web.

Además, también tiene la capacidad de mostrar el progreso de desplazamiento actual en porcentaje.

Funcionamiento

Importe los archivos scrollprogressJS a su documento HTML.

<link href="scrollprogressJS.css" rel="stylesheet">
<script src="scrollprogressJS.js"></script>

Inicialice el indicador de progreso de desplazamiento y listo.

document.addEventListener("DOMContentLoaded", function (event) {

progressJS.start();
});

Si desea mostrar el progreso de desplazamiento (lectura) actual en porcentaje.

<p class="per"></p>

document.addEventListener("DOMContentLoaded", function (event) {

progressJS.start({


"attach":
".per"

});
});

Personaliza la apariencia del indicador de progreso.

progressJS.start({

//color

"color": "#003f72",

//height

"height": "3px",

"top": 0,

"bottom": 0,

"left": 0,

"right": 0,

"zIndex": 9999,

//bottom or top

"ontop": true,

//left to right

"ltr": true,

//js style or css

"css": false,
});

Decida si desea utilizar números decimales.

progressJS.start({

"round": false
});

Ocultar el indicador (Mostrar sólo los valores porcentuales.).

progressJS.start({

"nobar": false
});