Build a visual progress tracker in Bubble that calculates completion percentages from completed steps and displays them as a progress bar with milestone markers. This tutorial covers creating the data structure for multi-step processes, calculating progress dynamically, and designing a responsive progress bar UI with color-coded milestones.
Overview: Building a Progress Tracker in Bubble
This tutorial shows you how to build a progress tracker that visually represents how far a user has advanced through a multi-step process. Whether it is an onboarding flow, a course curriculum, or a project checklist, you will learn how to track completed steps in the database, calculate percentages, and display a progress bar with milestones. Ideal for non-technical founders building apps with step-by-step flows.
Prerequisites
- A Bubble account with a new or existing app
- Basic familiarity with the Bubble Design and Data tabs
- Understanding of how to create workflows in Bubble
Step-by-step guide
Create the Process and Step Data Types
Create the Process and Step Data Types
Go to the Data tab and create a new Data Type called Process with fields: Title (text), Total Steps (number), User (User). Then create a Step Data Type with fields: Title (text), Order (number), Is Completed (yes/no, default no), Process (Process). This structure lets you define any multi-step process and track which steps each user has completed.
Expected result: Two Data Types appear in the Data tab: Process and Step.
Build the progress bar UI element
Build the progress bar UI element
On your page in the Design tab, add a Group element with a fixed height of 24px and width set to 100 percent. Set its background color to a light grey like #E5E7EB. Inside this group, add another Group element. Set its width to be dynamic using an expression: Search for Steps where Process equals this process and Is Completed equals yes, get the count, divide by the Process's Total Steps, and multiply by 100 to get a percentage. Set the inner group's background color to a bold blue or green (#3B82F6). Set its height to 100 percent and align it to the left.
Pro tip: Add a Text element inside the colored bar showing the percentage number for extra clarity. Use the formatted as operator to round the number to zero decimal places.
Expected result: A horizontal bar that fills from left to right based on the ratio of completed to total steps.
Add milestone markers along the progress bar
Add milestone markers along the progress bar
Above or below the progress bar group, add a Repeating Group set to Type: Step, Data source: Do a Search for Steps with Process equal to the current process, sorted by Order ascending. Set the layout to Row so markers appear horizontally. In each cell, add a small Circle Shape (16x16 pixels) with a conditional: when Current cell's Step's Is Completed is yes, change background to green. Below each circle, add a Text element showing the step title. Space the cells evenly using the Repeating Group's gap settings.
Expected result: A row of circle markers appears below the progress bar. Completed steps show green circles; incomplete steps show grey circles.
Create the step completion workflow
Create the step completion workflow
On the page where users complete steps (such as a lesson page or checklist), add a Button labeled Mark Complete. Create a workflow: When Button Mark Complete is clicked, Make changes to a thing, thing is the Current Page's Step, set Is Completed to yes. Then add a navigation or display action to move to the next step. The progress bar on the overview page will update automatically because it uses a live search.
Pro tip: Add an Only when condition: Current Page's Step's Is Completed is no — this prevents double-completion.
Expected result: Clicking Mark Complete sets the step to completed, and the progress bar reflects the new percentage.
Display a completion message at 100 percent
Display a completion message at 100 percent
Back on the progress tracker page, add a Group element below the progress bar containing a congratulatory message and an icon. Set a Conditional on this group: When Do a Search for Steps with Process equal to this process and Is Completed equals no, and the count is 0, make this element visible. Otherwise, keep it hidden with the Visible on page load checkbox unchecked. This group only appears when every step has been marked complete.
Expected result: When all steps are completed, a congratulations message appears below the fully filled progress bar.
Complete working example
1PROGRESS TRACKER — WORKFLOW SUMMARY2====================================34DATA TYPES:5 Process6 - Title (text)7 - Total Steps (number)8 - User (User)910 Step11 - Title (text)12 - Order (number)13 - Is Completed (yes/no, default: no)14 - Process (Process)1516PROGRESS BAR UI:17 Outer Group: height 24px, width 100%, bg #E5E7EB18 Inner Group: height 100%, bg #3B82F619 Width = (Search Steps where Completed=yes :count)20 / Process's Total Steps * 100 %2122MILESTONE MARKERS:23 Repeating Group (Row layout, Type: Step)24 Data source: Search Steps (Process = this, Sort by Order)25 Each cell: Circle Shape 16x16px26 Conditional: Is Completed = yes → bg green27 Text: Step Title2829WORKFLOW 1: Mark Step Complete30 Trigger: Button Mark Complete clicked31 Condition: Current Step's Is Completed is no32 Actions:33 1. Make changes to thing → Step, Is Completed = yes34 2. Go to next step or Navigate to overview3536COMPLETION MESSAGE:37 Conditional on Group:38 When Search Steps (Is Completed=no):count is 039 → This element is visible4041PERCENTAGE CALCULATION:42 Completed = Search Steps (Process=X, Is Completed=yes):count43 Total = Process's Total Steps44 Percentage = Completed / Total * 100Common mistakes when creating a progress tracker in Bubble.io: Step-by-Step Guide
Why it's a problem: Hardcoding the number of steps instead of counting dynamically
How to avoid: Store Total Steps on the Process and update it whenever you add or remove a Step, or use a count of related Steps
Why it's a problem: Using the filtered operator instead of search constraints for the completed count
How to avoid: Use Do a Search for Steps with a constraint of Is Completed equals yes for server-side filtering
Why it's a problem: Not hiding the completion message by default
How to avoid: Uncheck Visible on page load and use the conditional to make it visible only when all steps are complete
Best practices
- Use an Option Set or number field for step order so you can reorder steps without rebuilding
- Pre-compute the completed step count as a field on the Process to reduce search queries
- Set minimum width on the progress bar inner group so it always shows at least a sliver even at 1 percent
- Add transition CSS on the inner group for smooth animated filling when steps complete
- Test with edge cases: zero steps completed, all steps completed, and a single step process
- Use Privacy Rules to ensure users can only mark their own steps as complete
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a progress tracker in Bubble.io that shows a visual progress bar and milestone markers for a multi-step onboarding process. How should I structure the Data Types and calculate the percentage?
Build a progress tracker page with a horizontal progress bar that fills based on completed steps. Show milestone circles below the bar for each step. Include a congratulations message when all steps are done.
Frequently asked questions
Can I use this for course progress tracking?
Yes. Set each lesson as a Step within a Course (Process). When a student finishes a lesson, mark the step complete. The progress bar will show their course completion percentage.
How do I reset progress for a user?
Create a workflow that searches for all Steps where Process equals the target process and Is Completed is yes, then uses Make changes to a list of things to set Is Completed back to no.
Can I animate the progress bar filling up?
Bubble does not natively animate width changes. You can add a CSS transition using an HTML element with a style tag targeting the inner group's ID, such as transition: width 0.5s ease.
Does the progress bar update in real time for other viewers?
Yes. Because the progress bar uses a live Do a Search for query, it auto-updates when the database changes. Other users viewing the same page will see the progress bar update.
Can RapidDev help me build a more complex progress tracking system?
Absolutely. RapidDev can help you build advanced tracking features like weighted progress where harder steps count more, multi-track progress for parallel workflows, and executive dashboards showing team-wide completion metrics.
How do I show different colors at different completion levels?
Add conditionals to the inner group: when percentage is less than 33, background is red. When between 33 and 66, background is yellow. When above 66, background is green.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation