How do I build a level bar for users in my app?

[rich_maxwell]

Hi Everyone,

I am building a app with some gamified elements and want to show my users a visual representation of how far along in a level they are via a rectangular bar, like World of Warcraft used too. My thoughts on doing this was to set the width of a visible element based on 2 things:

1. A simple calculation of how far through the level a user is in percentage terms.
2. Render a visible rectangle of a certain length, depending on the percentage the user is at for the level.

My original thought was to add dynamic data into the width of a rectangle, but you can’t add dynamic data in that field, it needs to be manually entered.

Has anyone built any level bars in Bubble before, and if so, how did you do it?

Any help greatly appreciated.
Thanks Bubblers!

[JohnMark]

Hi @rich_maxwell

Maybe this plugin is what you’re looking for

• https://bubble.io/plugin/progress-bars-pro-1523000369525x715252417793884200
  or

• https://zeroqode.com/plugin/progress-bars-pro-1525679578105x209627467402444800

And Welcome to Bubble.

[yusaney1]

Hi, a similar approach would be to add a custom-bar with “progress style” like this:

Then add dynamic (experience data) to update-maintain the bar.