How to create a reading progress indicator in Bubble.io: Step-by-Step Guide

On your article or blog post page, add a Floating Group element at the top of the page. Set it to float relative to Top and make it full width with a height of 4 pixels. Set the background to transparent or a light grey. Inside this Floating Group, add a Group element (the progress fill). Set this inner group's height to 100 percent, background to a bold color like blue (#3B82F6), and align it to the left. Set its width to 0 percent initially. Give this inner group an ID of progress-bar in the element's settings.

Click on the page element itself (not any child element). In the Property Editor, go to the element's custom states and create a new state called Scroll Percent of type number with a default value of 0. This state will be updated by JavaScript as the user scrolls and will drive the progress bar width.

Add an HTML element to the page (it can be placed anywhere since it will be invisible). Paste a script that listens for the scroll event on the window. The script calculates the scroll percentage as: (how far the user has scrolled) divided by (total scrollable height minus the viewport height), multiplied by 100. It then updates the progress bar width directly using the element ID. This approach avoids the overhead of constantly updating a custom state on every scroll pixel.

1<script>
2window.addEventListener('scroll', function() {
3  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
4  var docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
5  var scrollPercent = (scrollTop / docHeight) * 100;
6  var bar = document.getElementById('progress-bar');
7  if (bar) {
8    bar.style.width = scrollPercent + '%';
9  }
10});
11</script>

Add another HTML element (or append to the existing one) with a style tag that targets the progress bar ID. Set a CSS transition on the width property so the bar animates smoothly rather than jumping between positions. A transition of 0.1 seconds with ease timing provides a responsive feel without lag.

1<style>
2#progress-bar {
3  transition: width 0.1s ease;
4}
5</style>

Preview your page and scroll through the content. The bar should read 0 percent at the top and reach 100 percent when you scroll to the very bottom. If the bar reaches 100 percent too early, check that the HTML element is placed within the page content flow (not inside a group that limits its height). If the page has a fixed-height container, you may need to modify the script to track the container's scroll position instead of the window. Test on both desktop and mobile viewports.