Cómo crear una barra o indicador de progreso que muestre el tiempo de lectura en nuestra web - jQuery.

Una de las tendencias del pasado 2017 en maquetación web, es indicar a través de una barra de progreso horizontal lo que lleva leído el usuario de nuestra web.

Lo podemos ver en multitud de webs y hemos decidido implentarlo en www.elmaquetadorweb.com

Si os fijáis bien a medida que hacemos scroll en este artículo, aparece un indicador de progreso en la parte superior que nos muestra de modo visual lo que llevamos leído.


Desde el www.elmaquetadorweb.com siempre nos gustan este tipo de recursos que apenas tiene impacto en nuestro código y son 100% responsive.

Para implementarlo vamos a utilizar prognroll un plugin jQuery pequeño y ligero que nos permite crear una barra de progreso al hacer scroll.

Para ello simplemente tenemos que descargarnos el plugin desde su página en github

Referenciamos la librería junto a jQuery, esta vez lo vamos a hacer mediante repositorios 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>

Por último inicializamos el plugin:

$("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     
});

A continuación os dejamos un ejemplo en nuestro CodePen.

See the Pen Barra o indicador de progreso que muestre el tiempo de lectura en nuestra we by Pedro Marín (@pedromarin) on CodePen.