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

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!

Hi @rich_maxwell

Maybe this plugin is what you’re looking for

And Welcome to Bubble.

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.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.