How to add a progress bar to your app

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this tutorial we demonstrate how to create a progress bar in Bubble using the Progress Bar plugin by 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.

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
, 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.