dev

ReadProgressBar es un script que agrega una barra de progreso en la parte superior de la pantalla el cual se estira a medida que el usuario se desplaza hacia abajo en una entrada de blog/artículo. Sirve para mostrar precisamente lo mucho que ha progresado el usuario en una página.

Una vez que alcanza el 100% del ancho (o, en otras palabras, el usuario se ha desplazado por debajo del artículo del blog/página), la barra en sí se esconderá por detrás de la barra de navegación superior.

Configuration

Puedes personalizar la barra de progreso utilizando el siguiente fragmento de CSS: 

:root {
  --progress-bar-border-radius: (valor-del-borde-aquí);
  --progress-bar-color: (valor-del-color-aquí);
  --progress-bar-height: (valor-de-la-altura-aquí);
}

También puedes fijar la altura (height) y radio del borde (border-radius) para ser de hasta 8px. Por lo que si quieres, por ejemplo, una barra de progreso de 6px de alto con color rosa caliente (hotpink) con bordes ligeramente redondos, este sería el código que utilizarías: 

:root {
  --progress-bar-border-radius: 4px;
  --progress-bar-color: hotpink;
  --progress-bar-height: 6px;
}

Para mostrar la barra de progreso en artículos añada window.enableReadProgressBarOnArticles = true en tu common.js antes de importar el script.

Demo

Toque la siguiente caja/checkbox para activar los estilos utilizados arriba.

Installation