Scroll Progress Bar Prompt: AI-Generated Code Example

This prompt instructs an AI coding assistant to generate a scroll-linked progress bar — a UI element fixed at the top of the page that fills horizontally as the user scrolls toward the bottom. It is a concise, single-request prompt that covers the three essentials: position (fixed top), behavior (scroll-driven fill), and feel (smooth animation). Models like GPT-4o or Claude work well here, typically returning clean HTML, CSS, and a short JavaScript event listener in one pass.

The real-world applications are broad: blog articles, documentation pages, long-form landing pages, and tutorial sites all benefit from this pattern because it gives readers a clear sense of progress. To adapt the prompt, you can specify a color scheme, bar thickness, or ask for a React or Vue component instead of vanilla JavaScript. Adding a phrase like "include a percentage label" or "fade out when at the top" opens up more refined variations without requiring a full rewrite of the original prompt.