Barra de progreso de scroll con IA: prompt y ejemplo

Este prompt genera una barra de progreso de desplazamiento vinculada al scroll de la página: un elemento fijo en la parte superior que se va llenando de forma progresiva a medida que el usuario avanza hacia abajo en el contenido. Es una solución de interfaz muy utilizada en blogs, artículos largos y páginas de documentación, donde orientar visualmente al lector sobre cuánto ha leído mejora notablemente la experiencia de uso.

Para reproducirlo, basta con enviarlo a un modelo con capacidad de generación de código como ChatGPT, Claude o GitHub Copilot, especificando el lenguaje deseado (HTML, CSS y JavaScript puro, o un componente en React). Se puede ajustar el color, el grosor o la velocidad de la animación añadiendo detalles al prompt original. También es posible pedir variaciones como una barra lateral, un indicador circular o una versión que cambie de color según el progreso, lo que lo convierte en un punto de partida versátil para cualquier proyecto web.