How to add a progress bar to your Bubble.io app

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.