Cómo construir una barra de progreso que muestre el porcentaje de desplazamiento en la página

En la era digital actual, las interfaces de usuario atractivas son fundamentales para brindar una experiencia óptima al usuario. Una de estas características que puede enriquecer la experiencia del usuario es una barra de progreso que refleje el porcentaje de desplazamiento en la página. En este artículo, aprenderemos cómo construir una barra de progreso sencilla utilizando HTML, CSS y JavaScript.

¿Qué es una barra de progreso?

Una barra de progreso es un indicador visual que muestra el avance de un proceso en una interfaz gráfica. En el contexto de una página web, una barra de progreso de desplazamiento indica cuán lejos ha llegado el usuario al desplazarse por el contenido de la página.

Beneficios de usar una barra de progreso

Mejora la experiencia del usuario

Una barra de progreso proporciona un feedback visual que puede mejorar la experiencia del usuario, haciendo que sea más consciente de su posición dentro del contenido.

Facilita la navegación

Los usuarios pueden tener una mejor idea de cuánto contenido les queda por ver, lo que puede facilitar la toma de decisiones sobre si seguir desplazándose o tomar otra acción.

Aumenta el engagement

Un diseño atractivo y funcional puede mantener a los usuarios más involucrados con el contenido de la página, aumentando así el tiempo que pasan en ella.

Componentes necesarios

Para construir una barra de progreso de desplazamiento, necesitaremos los siguientes componentes:

HTML: Estructura básica de la barra.
CSS: Estilo para que la barra sea visible y atractiva.
JavaScript: Lógica para calcular y actualizar la posición de la barra de progreso.

Paso 1: Estructura HTML

Comencemos creando la estructura básica de nuestra barra de progreso. Aquí tienes un ejemplo de cómo hacerlo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Barra de Progreso de Desplazamiento</title>
</head>
<body>
    <div id="barra-progreso"></div>
    <div class="contenido">
        <h1>Contenido de la Página</h1>
        <p>Aquí puedes añadir mucho contenido para probar la barra de progreso...</p>
        <p>Lorem ipsum dolor sit amet...</p>
        <!-- Añade más contenido aquí -->
    </div>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Estilo CSS

A continuación, aplicamos los estilos necesarios para que nuestra barra de progreso se vea bien. Crearemos un archivo llamado styles.css:

body {
    font-family: Arial, sans-serif;
}

#barra-progreso {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background-color: #4caf50;
    width: 0%;
    z-index: 1000;
}

.contenido {
    margin-top: 20px;
    padding: 20px;
}

Paso 3: Lógica JavaScript

Finalmente, implementaremos la lógica necesaria para que la barra de progreso se actualice a medida que el usuario se desplaza por la página. Creamos un archivo script.js con el siguiente código:

window.onscroll = function() {
    updateProgressBar();
};

function updateProgressBar() {
    const scrollTop = document.documentElement.scrollTop;
    const totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const progress = (scrollTop / totalHeight) * 100;

    document.getElementById('barra-progreso').style.width = progress + '%';
}

Explicación del código JavaScript

window.onscroll: Este evento se activa cada vez que el usuario se desplaza por la página.
updateProgressBar: Esta función calcula la posición de scroll del usuario y actualiza el ancho de la barra de progreso basado en el porcentaje de desplazamiento.
scrollTop: Obtiene la posición actual del usuario en la página.
totalHeight: Calcula la altura total del documento restando la altura del viewport (área visible) de la altura total.
progress: Se calcula como la relación entre la posición de desplazamiento actual y la altura total, multiplicada por 100 para convertirlo en un porcentaje.
Estilo de la barra: Finalmente, actualizamos el estilo de la barra para reflejar el progreso.

Conclusión

Crear una barra de progreso que muestre el porcentaje de desplazamiento en una página web es un proceso relativamente sencillo que mejora significativamente la experiencia del usuario. Con solo unos pocos pasos, puedes integrar esta funcionalidad usando HTML, CSS y JavaScript. La barra no solo proporciona un feedback útil para el usuario, sino que también puede hacer que tu página se vea más elegante y profesional.

¡Ahora estás listo para implementar tu propia barra de progreso en tu sitio web!