Cómo crear una barra de progreso de lectura con CSS y JavaScript

Spanish (Español) translation by Carlos (you can also view the original English article)

Tal vez hayas observado algunos blogs que muestran un «indicador de progreso de lectura» (o barra de progreso) para que los lectores sepan qué cantidad de contenido han leído y cuánto contenido queda.

Por lo general, estos indicadores se ubican en la parte superior de la página y, a medida que te desplazas hacia abajo, van incrementando cada vez más hasta que ocupan todo el ancho. Las barras de progreso como estas son bastante fáciles de implementar con JavaScript; en este tutorial eso es exactamente lo que haremos.

Indicador de progreso de lectura

Lo que cubriremos en este tutorial

Utilizaremos un event listener de JavaScript para detectar cuándo la página se desplaza. Luego, calcularemos qué tan abajo de la página se encuentra la ventana gráfica. Una vez que tengamos ese valor porcentual, actualizaremos una variable de CSS (propiedad personalizada) que estiliza la barra de progreso para mostrarla con un ancho determinado.

Las siguientes marcas de tiempo señalan secciones útiles del tutorial que quizá quieras volver a ver más adelante.

Nuestra demostración de la barra de progreso

Esta es la barra de progreso de lectura que vas a crear siguiendo este tutorial:

Please accept marketing cookies to load this content.

Scripts y plugins de JavaScript prémium

Explora los miles de plugins y plantillas de JavaScript en CodeCanyon. Compra estos archivos de JavaScript de alta calidad y mejora la experiencia de tu sitio web para ti y tus visitantes.

¡Has creado una barra de progreso de lectura!

Si has seguido este proceso, ahora debes tener un pequeño gran complemento en tu sitio web, creado con un poco de JavaScript y algo de CSS. Y ahora que conoces lo que es posible hacer con el método style.setProperty(), ¿por qué no ves qué más puedes cambiar?

Indicador de progreso con jQuery

Si disfrutaste de este tutorial y quieres crear algo similar, pero prefieres hacerlo con jQuery, Jonathan Cutrell creó exactamente lo que necesitas, ¡échale un vistazo!

jQuery

Cómo crear un indicador de progreso de desplazamiento de la página con jQuery y SVG

Jonathan Cutrell