Barra de progreso de tiempo de lectura con CSS

Darle a tus visitantes la máxima información sobre la dimensión de los textos que tienes en tu web y el tiempo que va a tardar en leerlos es una buena idea para mejorar la experiencia de usuario de tu sitio y hacer la lectura de tus contenidos mas amena.

Existen varias formas de indicar el tiempo de lectura, por un lado estimar los minutos que va a llevar leer el texto. Esto lo podemos hacer mediante una función de PHP que cuenta las palabras y realiza una estimación según un número de palabras por segundo que indiquemos. Puedes ver un ejemplo en nuestro tema WordPress Rosalie.

Pero el tutorial de hoy lo centraremos en crear una barra de progreso que nos indique cuanto queda para terminar la lectura de nuestro artículo. Dicha barra se irá completando a medida que avancemos y hagamos scroll en el texto, hasta completarse y desaparecer.

Así que prepara tu hoja de estilos y ten a mano estos dos artículos sobre cómo añadir CSS a WordPress y cómo usar el inspector del navegador, pues si quieres añadir una barra de progreso a tu web, seguramente los necesitarás.

Cómo crear una línea de progreso temporal con CSS

Crear una línea de progreso para estimar el tiempo de lectura puede hacerse con JavaScript mediante una función que mida la altura del contenedor del texto (si estamos en WordPress será el div con la clase .entry-content) y vaya rellenando el ancho de la barra de progreso igualando ambos valores: height del contenedor y width de la barra.

Pero cómo en Silo nos gustan los retos, vamos a ver cómo podemos conseguir una barra de progreso con CSS y con nuestros colores personalizados. Hoy no habrá nada de JS ni PHP 🙂

Para ello hemos utilizado un HTML de ejemplo que bien podría ser el de un artículo de cualquier WordPress. De hecho el texto está sacado de este artículo. Como ves vamos a hacer uso de la clase .entry-content (donde WordPress va a imprimir el contenido the_content();) y su contenedor inmediatamente superior, que nos servirá para crear la barra de progreso usando pseudo-elementos CSS. Aquí puedes aprender más sobre los pseudo-elementos CSS:

<section class="example-post">
	<div class="entry-content">
		<h2>Example Post</h2>
		<p>Texto del post</p>
		<p>Un poco más de texto</p>
		<p>Párrafo final</p>
	</div>
</section>

Perfecto, tras esto llega el turno al CSS. Vamos a hacer uso de un nuevo valor para la propiedad position. Se trata de position: sticky; que nos va a permitir fijar un elemento al área que esté visualizando el usuario solo cuando dicho elemento aparezca por primera vez, es decir, cuando el usuario haga scroll y llegue a él. La compatibilidad de sticky aún es limitada, pero con el uso de prefijos podemos comenzar a usarla de forma experimental.

Para ello definiremos dos pseudo-elementos, uno con un gradiente triangular que irá por detrás y otro por delante, con position: sticky; y fijado al bottom. La altura de ambos elementos definirá el efecto. El gradiente heredará el 100% de la altura del artículo, mientras que la capa superpuesta el 100% del alto menos 6px. Sería como construir un muro que ocupe el 95% del alto de la pantalla y en ese 5% restante fuese pasando el gradiente, dando el efecto de llenar la barra de progreso.

.example-post {
    position: relative;
}
.example-post:before {
    content: "";
    display: block;
    background: linear-gradient(to right top, #CDDC39 0%, #03A9F4 50%, #e6f0f5 50%);
    height: calc(100% - 100vh + 6px);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.example-post:after {
    content: "";
    display: block;
    background: #e6f0f5;
    height: calc(100vh - 6px);
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    left: 0;
}
.entry-content {
    position: relative;
    z-index: 1;
    margin-bottom: calc(-100vh + 6px);
}

Como puedes ver en el código, los valores de los height están retocados basados en la altura del área de pantalla. También puedes observar un fix con un margin inferior negativo para el contenido del artículo, y es que aunque el pseudo-elemento que hemos creado antes tiene un valor sticky, hasta que no ocupa la posición indicada cuenta como altura del contenedor, es decir, ocupa espacio, no como los absolute o fixed.

Barras de progreso para mejora la experiencia de usuario.

¿Quién no recuerda esas barras de progreso en versiones anteriores de Windows que parecían no acabar nunca, o simplemente se completaban una y otra vez (Windows Vista) dando la impresión de que algo estaba pasando pero sin una estimación real de cuando terminaría el proceso?

Este tipo de detalles son los que minan la experiencia de nuestros usuarios y pequeños detalles como esta barra de progreso pueden conseguir una lectura mucho mas controlada de nuestros artículos. Personalmente siempre había pensado que la barra de scroll del navegador podría servir para marcar la longitud de un contenido, pero esto no es siempre así. Por un lado hay veces que los comentarios ocupan mucho más que el propio contenido, aquí un ejemplo. Y por otro que no siempre está disponible dicha barra en los navegadores móviles.

Junto con el artículo de la animación del icono hamburguesa y la barra social flotante con HTML y CSS podemos conseguir grandes resultados en experiencia de usuario con pequeños detalles, y todo con HTML y CSS. Espero te haya servido de ayuda!