En este artículo, aprenderás cómo crear una barra de progreso de lectura usando javascript, que avanza mientras el usuario va desplazándose por la página. Esta línea no solo proporciona una indicación visual del progreso de la lectura, sino que también puede mejorar la experiencia del usuario al ofrecer una sensación de avance constante. En el video mas abajo, podras aprender esta técnica junto con un indicador de progreso en porcentaje utilizando HTML, CSS y JavaScript.
Paso 1: Estructura HTML
El primer paso para crear la barra de progreso de lectura con javascript, es establecer la estructura HTML básica.
Necesitaremos un contenedor para la línea de lectura y el indicador de progreso, así como un área de contenido donde se mostrará el texto. Aquí está el código HTML inicial:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Línea de Lectura Progresiva</title>
<style>
</style>
</head>
<body>
<div class="reading-line-container" id="readingLine" data-progress="0"></div>
<div class="content">
<!-- Contenido de tu artículo aquí -->
</div>
<script>
</script>
</body>
</html>Como podras ver, tengo dos contenedores.
- El primero es la barra en cuestion. Este contenedor va a tener una clase para el estilo que le vamos a crear a la barra, el «
id» que nos permite acceder desde javascript para la animacion de progreso. Ademas, usaremos «data-progress» para generar el progreso de la barra, ademas de presentar el progreso de forma numerica. - El segundo contenedor va a contener el contenido de la pagina web.
Paso 2: Estilos CSS
Ahora, vamos a agregar los estilos CSS necesarios para dar estilo a nuestra barra de progreso de lectura y al indicador de progreso. También incluiremos estilos para el contenido del artículo:
Con proposito de aprendizaje, presta atencion de que height en body esta definido para simular un gran contenido, pero en produccion no lo necesitaremos. El estilo .reading-line-container::after, permite crear el texto que necesitaremos para presentar el progreso de lectura.
<style>
body {
font-family: Arial, sans-serif;
padding: 0;
margin: 0;
height: 2000px;
}
.reading-line-container {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 12px;
background-color: #007bff;
z-index: 1000;
}
.reading-line-container::after {
content: attr(data-progress) '%';
position: absolute;
top: 1px;
right: 2px;
font-size: 10px;
color: #333;
}
.content {
padding-top: 50px;
}
</style>Paso 3: JavaScript
Por último, necesitamos agregar el script JavaScript que actualizará el progreso de la línea de lectura mientras el usuario hace scroll por la página:
<script>
document.addEventListener('DOMContentLoaded', function() {
const readingLine = document.getElementById('readingLine');
const windowHeight = window.innerHeight;
const totalScrollHeight = document.body.clientHeight - windowHeight;
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
const scrollPercentage = (scrollPosition / totalScrollHeight) * 100;
const lineWidth = Math.min(scrollPercentage, 100);
readingLine.style.width = lineWidth + '%';
readingLine.setAttribute('data-progress', Math.round(lineWidth));
});
});
</script>Ahora has aprendido cómo crear una línea de lectura progresiva con un indicador de progreso en porcentaje que se actualiza mientras el usuario hace scroll por la página. Esta técnica no solo puede mejorar la experiencia de lectura, sino que también puede ser útil para diseñadores y desarrolladores web que deseen agregar un toque interactivo a sus sitios.
Si tienes alguna pregunta o sugerencia, ¡no dudes en compartirla en los comentarios!