Scroll Progress Bar

WHAT IT DOES

Scroll Progress Bar adds a sleek progress bar to the top (or bottom) of the page that fills up as you scroll down. The bar provides a clear visual indicator of how much of the page you've read and how much remains. The bar updates in real time as you scroll, and the current percentage is displayed next to the bar. You can click anywhere on the bar to instantly jump to that position in the page, making navigation fast and intuitive. The bar is fully customizable—choose any color, adjust the height, show or hide the percentage, and toggle the background.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All scroll tracking, progress calculation, and bar rendering occur on your machine without any network requests. No scroll data, page content, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox. Scroll progress uses the browser's native scroll events and DOM properties.

HOW TO USE

Click the extension toolbar icon to open the Scroll Progress Bar panel. The bar appears automatically at the top of the page. Click "Toggle Bar" to show or hide the bar. Click "Refresh" to update the bar position if needed. Use the color picker to change the bar color. Use the height slider (2-20px) to adjust the bar thickness. Change the bar position between "Top" and "Bottom" using the dropdown. Toggle "Show percentage" to display the percentage next to the bar. Toggle "Click to scroll" to enable or disable clicking on the bar to jump to a position. Toggle "Show background" to show or hide the bar's background track. The panel shows the current status of the bar.

THE SCROLL PROGRESS ENGINE — WHY IT WORKS

Most scroll progress bars use simple calculations that fail on pages with dynamic content or complex layouts. This tool uses a robust calculation: it computes the total scrollable height as the maximum of body.scrollHeight, documentElement.scrollHeight, and several other properties to handle all layout variations. The current scroll position is read from pageYOffset or scrollTop. The progress percentage is calculated as (scrollTop / (scrollHeight - clientHeight)) * 100, clamped between 0 and 100. The bar width is updated using CSS transitions for smooth animation. The click-to-scroll feature calculates the target scroll position proportionally from the click position on the bar and uses window.scrollTo with smooth behavior. The bar is positioned with fixed positioning and z-index 999999 to stay above all page content. The scroll events are throttled using requestAnimationFrame for optimal performance, preventing excessive DOM updates during rapid scrolling.

THE PANEL

The Scroll Progress Bar panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the controls and options adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to customize the scroll bar in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. The progress bar appears on all pages by default; it can be toggled off for specific pages. The click-to-scroll feature may not work perfectly on pages with complex scrolling behavior or fixed headers. The bar uses a fixed position, so it will overlay page content—adjust the height to minimize obstruction. All scroll data is processed locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.