In this Bubble 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.
Install Progress Bar by Bubble plugin
So let's get started. 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 percentage. So if I put in 30% and then hit preview, we should see a progress bar that shows 30%.
Remove percentage value text
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.
What else? Other frustrations with progress bars. Well, what if you're not dealing with a range of naught to 100, you don't get a neat percentage value.
Converting numbers into percentage values
To demonstrate that, we'll put in a slider input and let's go from zero to five. One step increments. Okay, so this is just to visualise a way of generating a percentage value when you're not dealing with something that is out of 100, like your naught to five 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. And so our expression is 100 divided by five 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, there you go. You can see it's converted 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. 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.