Como crear una barra de progreso de lectura

Algo que se ve en muchas páginas es una barra de progreso de lectura, que nos va indicando al hacer scroll cuánto falta para acabar la lectura del artículo/página en cuestión.

Vamos a ver cómo crear una de esas barras de progreso de lectura con prognroll un plugin muy ligero que funciona con jQuery, apenas tiene impacto en el código, mejora la experiencia del usuario y además es totalmente responsive.

Para ello, lo primero que haremos será enlazar jQuery y prognroll, por ejemplo a través de CDN:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/mburakerman/prognroll/master/src/prognroll.js"></script>

Después añadiremos el script que lo inicializará y personalizará esa barra de progreso de lectura:

$("body").prognroll({
    //Altura de la barra de progreso
    height: 8,        
    //Color de la barra de progreso
    color: "#1C94BA",
    // Si queremos añadir una barra de progreso a una capa ponemos el valor true
    custom: false     
});

Este ejemplo sería para una barra de progreso como la que está implementada en esta web.

No obstante, aquí podéis ver un ejemplo del código implementado.

See the Pen Ejemplo de código by serjuzu (@serjuzu) on CodePen.light


Crédito de la Imagen destacada:

unsplash-logoGreg Rakozy

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>