Workflow progress bar - How to make it more visible


I am having a purchase process which takes quite a while to run through. Some customers seem not to wait…

Is there a way to make the Bubble workflow progress bar either more visible, substitute it with a spinning wheel or just block any further action until the workflow has finished?

Thanks for help

You should be able to use a workflow to show a pop-up while the workflow progress bar is active. Pop up can have your alternate animation, and text.

From a “marketing” standpoint this is a great little window to engage with users who make purchases.

1 Like

I don’t think there is a way to modify the bar (anything other than the color of it at least) but if you just wanted to go full custom you could make the opacity 0 in Settings > General and craft your own loading spinners/bars inside of the workflow. A popup like @zach8 suggested is only one of many options. Most of my users interact on touch interfaces so I tend to build them in to the button (i.e. button text changes to spinner when loading something)

1 Like

I tried to show a popup at the beginning of the purchase process and close it at the end, but nothing happens…
I am not sure how I can show the popup while the progress bar is active…

I don’t think there is a direct option to trigger the workflow based on the progress bar.

But you should he able to “side chain” it to the workflow that triggers the progress bar. So if “user pressed the submit button” triggers the action that triggers the progress bar, then just add a workflow step to also display the pop up when the button is pressed.

And then, when the progress bar finishes and the new data displays, you can set a workflow that will close the pop up.

1 Like

Yes exactly. Adding to this, if the workflow happens too quickly, the showing/closing of the popup won’t happen. If it’s imperative to have the loading feature, you can use the ‘Add a pause’ step

1 Like

It takes almost 30 seconds…

I must be doing something wrong. Nothing pops up…
I also must add, that the main event requires to open App Store in app payment or Google play purchase to open. After those popups are closed the main page opens again, but purchase has not been processed yet and the red progress bar takes about 30 seconds to update all custom data.

Attempt to open popup

Main payment platforms event

Thanks for help

Hmm ok. Is it a mobile app and you’re using In-app purchases? Either way, I think the issue lies with the payment flow, which you can’t do much to avoid.

So, to show a loading screen, you’ll need to get a little more creative. Here are some ideas:

If the page is not navigated from, you can add a custom state to the page, something like loading_now which is a yes/no. When the user presses the button to trigger the payment process, set the state to “yes.”

Add a condition on the main group to be hidden (and collapsible) when loading_now is yes. Additionally, add another group to the page which is hidden on default but visible only when loading_now is yes. This is where you’ll add your loading icon or text.

IF the page is navigated for the payment flow, that will likely clear out the custom state for loading when returned to the page. In that case, you can likely use URL parameters to achieve a similar concept.

I hope that makes sense and works out for you!

1 Like

Also, your show/close popup workflow steps should be in your main process. That could be your problem. Add the “Show Popup Wait for purchase” after step 3 in your main process. And the close popup a the end.

1 Like


A similar version of this actually worked: there are 2 processes involved in the purchase.
Showing and hiding the popup in the secondary process did the trick.

Now I would like to:

  • either make the popup full screen or
  • make it impossible to click on the screen outside the popup, because that closes the popup…

Whichever is easier (I tried with html getting a full screen popup but nothing happens…)


Are you talking about the popup to show your loading icon? If so, use the “this popup cannot be closed with esc” check box.

And rather than making it full screen, you can play around with the shadow color, making it a flat color that spreads the full width and height of the page so it feels like it’s full screen.