Generate custom scroll progress bar code for your website. A free, user-friendly tool to create reading progress indicators with CSS and JavaScript snippets.
AI Generation Prompt
Functional Specification: Free Scroll Progress Bar Code Generator
Overview
A lightweight, browser-based tool that allows web developers and designers to instantly generate clean, efficient HTML/CSS/JS snippets for adding a reading progress indicator to their websites. The app focuses on zero-dependency implementation for maximum performance.
Key Features
- Live Preview Window: An interactive box that simulates a webpage viewport, showing the progress bar in real-time as the user scrolls within the preview.
- Visual Customization: Intuitive controls for:
- Bar height (in pixels).
- Color and background selection via a color picker.
- Positioning (Top/Bottom, Fixed/Sticky).
- Z-index control to ensure proper layering.
- Code Generator: Auto-updating snippet generation for HTML structure, CSS styling, and Vanilla JavaScript logic.
- One-Click Copy: Built-in clipboard functionality for fast implementation without manual highlighting.
UI Design Specification
- Aesthetics: Professional "SaaS" light mode aesthetic. Use soft grays, crisp whites, and a primary brand color (e.g., a vibrant blue) for action buttons. Typography should be clean and legible (e.g., Inter or system-ui).
- Layout:
- Header: Clean, minimalist title with a descriptive tagline.
- Main Interface: A responsive two-column layout. On larger screens, the left side holds configuration controls, and the right side holds the live preview and output area. On mobile, the interface stacks vertically.
- Animations: Micro-interactions such as button hover states, subtle slide-in animations for the code output, and smooth transitions when updating live preview values.
Technical Constraints & Directives
- Single-File Architecture: Everything must be contained in a single index.html file. CSS and JS can be embedded in
<style>and<script>tags. - No Local Storage: Do not use
localStorage,sessionStorage, or cookies. Keep all state (user input) in local JS variables. - Iframe Compatibility: The tool will run in a sandboxed iframe. Ensure no popups or restricted browser APIs are called.
- Responsive Design: The preview window must dynamically resize based on the browser width to ensure the user sees how the indicator behaves on mobile devices.
- Vanilla JS: No React, Vue, or Angular. Use standard DOM manipulation to ensure high speed and reliability.
Color Palette (Light Mode Only)
- Background: #f8fafc (Slate 50)
- Card Background: #ffffff (White)
- Primary Accent: #2563eb (Blue 600)
- Text Primary: #1e293b (Slate 800)
- Text Secondary: #64748b (Slate 500)
- Border: #e2e8f0 (Slate 200)
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a scroll progress bar and why should I use one?
A scroll progress bar is a visual indicator placed usually at the top or bottom of a webpage that tracks how far a visitor has scrolled through an article. It provides immediate visual feedback, helping users understand the length of the content and their current reading position, which can significantly improve user engagement on long-form articles or blog posts. Implementing this feature is particularly beneficial for content-heavy sites where readers might feel lost or overwhelmed. By providing this simple, non-intrusive cue, you effectively guide the user through your content, encouraging them to continue reading until the very end.
How do I implement the generated code into my website?
The tool generates three distinct snippets: an HTML placeholder, CSS styles, and a Vanilla JavaScript logic block. Simply copy these snippets and paste them into your project; the HTML goes where you want the bar to appear, the CSS goes in your stylesheet, and the JavaScript should be placed before the closing body tag or in a separate script file. Because the generated code relies exclusively on lightweight, native browser APIs, it ensures high performance without the need for external jQuery plugins or heavy framework dependencies. This ensures that your website remains fast and accessible for all users regardless of their device or internet connection speed.
Does this tool require external libraries or frameworks?
No, the code generated by this tool is written in pure, vanilla HTML, CSS, and JavaScript. This approach is designed for maximum compatibility and performance, allowing you to easily integrate the progress bar into any website—whether it is built on a static HTML platform, a CMS like WordPress, or a modern JavaScript framework. By avoiding complex dependencies, you minimize your site's payload size and reduce the risk of version conflicts. You get clean, modular code that is easy to maintain, update, or style further to match your website's specific visual branding and design language.
Is the scroll progress bar mobile-responsive?
Yes, the logic is built to be fully responsive. It calculates the scroll percentage dynamically based on the document's scroll height and the window's inner height, ensuring accuracy across both desktop monitors and small mobile screens. The CSS utilizes flexbox and fixed positioning to ensure the bar stays anchored correctly regardless of the viewport size. Because the solution is native, it handles screen orientation changes and browser resizing events gracefully. You do not need to worry about the indicator breaking or becoming misaligned when a user rotates their device or switches from portrait to landscape mode.
