A bar that shows progress from “Before” to “Now” (e.g. 100% → 0%)
A middle marker or text that says before or done
It should dynamically update based on data values (for example, before = old value, now = new value)
Ideally, it should look clean and rounded like a progress tracker
I’ve checked some progress bar plugins but haven’t found one that supports this kind of dual or comparison display yet.
Question: Does anyone know a plugin or method in Bubble that can display this kind of “Before → Now” progress comparison (maybe using custom states, shapes, or chart plugins)?
You can make your own progress bar without a plugin.
I’ve made a couple myself.
You just put together say 10 groups with a top and bottom border…the groups on each end have a 50% rounded end. Obviously, you can style the bar and everything else the way you want.
Then just dynamically assign the background color of each group based on the data you want to use.
You described what you want it to look like, which is very doable, but it’s hard to tell you how to show progress with the little info you’ve given about you’re tracking
Looked like a fun progress bar to build with vanilla Bubble, so I quickly created this for you. It’s not perfect yet, but hopefully it guides you in the right direction!
Thanks for the reply! I checked it out — looks great. However, I’d like the progress bar to show 100%, since it’s mainly for tracking user course progress (based on total lessons + total tasks) to compare previous and current results (user completed lessons and tasks) — basically to show if the user has made any progress.
Setting the List of Numbers to 100, instead of 10, will already fix this partially. It’s still not perfect but with a few UI tweaks I’m sure you’ll get there!
Does anyone know a plugin or method in Bubble that can display this kind of “Before → Now” progress comparison (maybe using custom states, shapes, or chart plugins)?
