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!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
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.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.