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.
Get the Complete Bundle for Just $99
Access 3 courses, 390+ 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 390+ 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.
Save over 70%!
Valued at $80
Valued at $85
Valued at $30
Valued at $110
Valued at $45
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
We're here to help you launch your no code SaaS. Reach out to the team and we'll double check our vast library for useful content. We'll advise you on how we'd tackle the same problem and there's a good chance we'll record the video to help the wider community.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.