How to achieve a custom status bar

Hi All,

In our project, we have a requirement to display a custom status bar for prescriptions, similar to the one shown in the attached image. Could anyone provide guidance on how to achieve this custom design in Bubble, along with the necessary logic implementation?

Thank you in advance for your support!

Yes that can be done with the Shape element (with a roundness of 100 it makes it a circle) and an Icon element both in a group set to Align to Parent layout so they are stacked on top of each other.

The vertical line is just another shape element but 1px wide. Then have conditions on all the elements to change color (or icon) based on the current status

1 Like

@bubbleerx this is a simple design and workflow to set up in Bubble.

I recommend you watch Gregory’s videos on YouTube which shows practical examples.

Anyway, I started building a quick demo as I was bored but quickly got busy lol. But it shows most of what you want to achieve.

You can also checkout the editor here prescription-request | Bubble Editor

2 Likes

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