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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
3 ways we support solopreneurs
Our team is here to help, with a combined 30+ years working for internet startips.
Learn Bubble
Explore our library of 300+ Bubble and no code tutorial videos. Watched by over 800k no coders on YouTube.
Bubble Coaching
Troubleshoot your Bubble app and build new no code features with our in house Bubble expert.
Mastery
Ready to take your SaaS idea to the next level? Join our exclusive Mastery program for personalised content & mentoring.