Scroll Progress Bar Prompt: AI-Generated CSS Example

This prompt asks an AI coding assistant to generate a scroll-linked progress bar — a thin bar fixed at the top of the page that fills from left to right as the user scrolls down, while displaying the current scroll percentage. It is a practical UI enhancement commonly used in blog articles, documentation pages, and long-form landing pages to help readers track how far they have progressed through the content.

The implementation typically requires a small amount of JavaScript to calculate scroll position relative to total page height, combined with CSS for the fixed positioning and fill animation. This prompt works well with models like GPT-4o or Claude when you need clean, copy-paste-ready code. You can extend the basic version by customizing the bar color, height, or animation speed, or by adding a tooltip that shows the exact percentage as a floating label. It is a great starting point for anyone looking to add subtle but effective reading progress indicators to a web project.