Picture of a person choosing an icon on a virtual screen. Rapid Developers
/Bubble Development Agency

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

Learn to add a reading progress indicator in Bubble.io with our easy step-by-step guide. Elevate user experience on your site effectively.

Explore more
A person working at the laptop. Rapid Developers

Hire an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Explore more

How to create a reading progress indicator in Bubble.io?

Step 1: Install the Progress Bar Plugin

  • Begin by going to your Bubble.io editor.
  • Access the Plugin tab and search for the "Progress Bar" plugin.
  • Install the plugin in your Bubble application.

Step 2: Add Progress Bar Element

  • Navigate to the design tab where you lay out your application’s pages.
  • Click on the visual elements section, and choose the Progress Bar element provided by the plugin.
  • Place the Progress Bar element on the page where you want the reading progress indicator to appear.

Step 3: Customizing the Progress Bar

  • Click on the Progress Bar element you’ve placed on the page to open its properties.
  • Set the “Percentage” property to dynamically represent the reading progress on the page. You can do this by using a dynamic expression that calculates the scroll position of the user on the page relative to the total content height.
  • Choose the color for the progress bar's indicator to match your design.
  • Enable the “Animate progress” option if you want the progress bar to animate smoothly as it updates.
  • Combine this with other elements like text or icons if you want to display the percentage explicitly.

Step 4: Create Workflows for Tracking Progress

  • Go to the Workflow tab to set up interactions that will update the progress bar.
  • Create an event that triggers on page scroll or when the user interacts with the reading content.
  • Use this event to update a custom state or database field that the Progress Bar's percentage is dependent on.

Step 5: Testing and Adjusting

  • Preview your application to test the reading progress indicator. Scroll on the page to ensure the progress bar updates as expected.
  • Adjust the dynamic expression or workflows based on your testing to ensure accuracy in the reading progress indicator.
  • Once you’re happy with the functionality, make any final design tweaks to ensure the indicator fits well with the overall look of your application.

Remember to check your application’s responsiveness to ensure the reading progress indicator works across different devices and screen sizes.

Want to Enhance Your Business with Bubble?

Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.

Book a free consultation