Barra de progreso de lectura
Elige el color y la altura.
Cómo usarCuánto del texto ya se leyó
Disponible en: 
Barra de progreso de lectura: para qué sirve
La barra de progreso de lectura es la línea delgada en la parte superior que se va llenando a medida que la persona lee el artículo, mostrando cuánto falta.
Elige el color o un degradado, la altura y si va arriba o abajo.
Cómo usar
- Elige el color, la altura y la posición.
- Desplázate por la vista previa para verla funcionando.
- Copia el código y pégalo en la página del artículo.
Cuándo usar
- Blog y artículos largos.
- Recetas y tutoriales.
- Páginas de documentación.
Preguntas frecuentes
¿Cómo funciona solo con CSS?
Con las animaciones ligadas al desplazamiento (animation-timeline: scroll()), la barra crece a medida que la página se desplaza, sin ningún script y sin pesar en el desplazamiento. Chrome y Edge lo soportan desde la versión 115 y Safari desde la 26; en los demás, el código usa el JavaScript de respaldo.
¿Dónde vale la pena usarla?
En artículos largos, recetas y guías, donde saber cuánto falta ayuda a seguir leyendo. En páginas cortas, la barra casi no se mueve y no aporta nada.
¿El lector de pantalla lee la barra?
No: es decorativa y lleva aria-hidden, para que no se anuncie en cada desplazamiento. Quien usa lector de pantalla ya tiene otras formas de saber su posición en el texto.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.