How to add a progress bar to your Bubble.io app
In this Bubble.io tutorial we demonstrate how to create a progress bar in Bubble using the Progress Bar plugin by Bubble.io. This Bubble tutorial includes a couple of extra tricks and tips including how to remove the text value from the progress bar and how to work with the progress bar when you are not working with percentage values.
Master progress bars in Bubble: Learn tricks for customizing appearance and handling non-percentage values!
Unlock advanced Bubble features: Discover how to leverage math.js for dynamic calculations in your progress bars.
Elevate your Bubble app design: Explore tips for creating visually appealing progress bars that enhance user experience.
Setting Up a Progress Bar in Bubble
In this tutorial, I'm going to demonstrate how to set up a progress bar in Bubble and also cover some of the issues you might face and frustrations with using a progress bar in your Bubble app. So let's get started.
Adding the Progress Bar Plugin
I'm going to add in the progress bar plugin by Bubble and let's add it into our page. Okay so progress bar by Bubble takes a percentage so if I put in 30% and then hit preview we should see a progress bar that shows 30%.
Customizing the Progress Bar
A couple of tricks on this maybe you don't want to show the text so one way of doing that would be to change the font size to zero and now you have a progress bar without your text value.
Dealing with Non-Percentage Values
What else? Other frustrations with progress bars well what if you're not dealing with a range of 0 to 100 you don't get a neat percentage value and to demonstrate that we'll put in a slider input and let's go from 0 to 5 one step increments.
Calculating Percentages
Okay so this is just to like visualize a way of generating a percentage value when you're not dealing with something that is out of 100 like your 0 to 5 here. So we need to do a calculation and to do that we can use math.js which is tricky for me saying because I'm British so I would want to call it maths but it's math.js and then we can write an expression in here.
Using Math.js for Calculations
Our expression is 100 divided by 5 times the slider value and I'll put in a text value there just to show what's going on if we go math.js text. Let's try that. Okay so there you go you can see it's conversing into percentages so quickly link it up to here we go math.js number because this has to be a number value it can't be text and then there you go I'm changing my slider based on calculating a percentage from scratch.
Exploring Other Progress Bar Options
So there are other progress bar plugins plenty of them available in the Bubble plugin directory but there's just a couple of tips and tricks for getting the most out of Bubble's own progress bar plugin.
Ready to Transform Your App Idea into Reality?
Access 3 courses, 400+ tutorials, and a vibrant community to support every step of your app-building journey.
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 400+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
Valued at $80
Valued at $85
Valued at $30
Valued at $110
Valued at $45
14-Day Money-Back Guarantee
We’re confident this bundle will transform your app development journey. But if you’re not satisfied within 14 days, we’ll refund your full investment—no questions asked.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
Not at all. Our courses are designed for beginners and guide you step-by-step in using Bubble to build powerful web apps—no coding required.
Forever. You’ll get lifetime access, so you can learn at your own pace and revisit materials anytime.
Our supportive community is here to help. Ask questions, get feedback, and learn from fellow no-coders who’ve been where you are now.
Absolutely. If you’re not satisfied within 14 days, just reach out, and we’ll issue a full refund. We stand by the value of our bundle.
Yes, this is a special limited-time offer. The regular price is $350, so take advantage of the discount while it lasts!