Web Tutoriales

Crea una barra de progresión para indicar el porcentaje de scroll de una página

Cómo crear una barra en la parte superior de la web que indique el porcentaje de scroll avanzado en una página.

barra-progresion-porcentaje-scroll

En páginas con mucho texto podemos añadir una barra fija en la parte superior de la página para mostrar el porcentaje de distancia recorrida y dar indicaciones al usuario de cuánto queda hasta llegar al final de la página.

Podemos hacerlo con CSS y JavaScript, sin librerías adicionales:

  1. Utilizando pseudoelementos (::before) para dibujar la barra.
  2. Aprovechar una variable CSS (--scroll) que actualizaremos dinámicamente desde JavaScript.

La estructura del código

Primero podemos crear un <div> en HTML para contener el texto:

<div class="content">
  <h1>Progreso de Scroll con Solo CSS</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum...</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
  <p>Nullam vitae magna et mauris tincidunt varius. Integer gravida velit vitae justo elementum...</p>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae...</p>
  <p>Cras sed arcu nec justo luctus finibus. Integer commodo leo in suscipit dignissim...</p>
</div>

Y luego el código CSS:

body {
  margin: 0;
  padding: 60px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #e0e0e0;
  background-color: #121212;
  background-image: linear-gradient(to bottom, #1e1e1e, #121212);
  position: relative;
}


body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, #00ffe7 0%, #00ffe7 var(--scroll), transparent var(--scroll), transparent 100%);
  z-index: 999;
  transition: background 0.1s ease-out;
}


:root {
  --scroll: 0%;
}

  • El pseudoelemento body::before
    Este bloque se encarga de dibujar la barra de progreso. Se fija en la parte superior (position: fixed; top: 0;) y ocupa todo el ancho de la pantalla. Lo interesante ocurre en su fondo: usamos un degradado que se interrumpe en el punto exacto que marca el avance del scroll.

  • La variable CSS --scroll
    La clave está en esta variable. Sirve como punto de corte del degradado: desde 0% hasta --scroll tenemos color; del punto --scroll al 100%, la barra es transparente.

El código JavaScript:

document.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  const docHeight = document.body.scrollHeight - window.innerHeight;
  const scrollPercent = (scrollTop / docHeight) * 100;
  document.body.style.setProperty('--scroll', scrollPercent + '%');
});
  • El script
    Aunque todo el dibujo se hace con CSS, necesitamos saber cuánto ha recorrido el usuario. Aquí entra JavaScript. Cada vez que se hace scroll, calculamos el porcentaje del avance (scrollTop / docHeight) y actualizamos la variable CSS con style.setProperty.

Ejemplo en funcionamiento