Forum Academy Marketplace Showcase Pricing Features

Creating a Page Loading/Page In progress Indicator

Hello,

I’ve ben going through the forum but wasn’t quite clear if this is either difficult or impossible to do on the Bubble platform.

Basically I’m going through beta testing on my app and one of the biggest complaints I get is that the app may be slow but more importantly, the user is not sure if the app is loading so they perform other acts like re-clicking on buttons.

I was advised to include an icon with each page change to show that the loading is in progress on my pages. I would imagine most developers experience this, and would appreciate some help on this.

Thanks

I handle this in three different stages:

  • Find out why my action is slow, and try to fix it
  • Offload pieces to an API workflow where it makes sense
  • Use the loading spinner

To use the loading spinner, I usually have showing it as the first step in the workflow. Then, the last step of the workflow is to hide it. I do this as a popup that can’t be closed by pressing escape.

4 Likes

Thanks @andrewgassen. I’ll give this a try.

Now the loading spinner you are talking about is the commercial plugin by Zeroqode correct?

Actually, I just use my own icon and animate it myself. I haven’t checked out their plugin, but might be worth a shot!

It seems pretty pricey $5/month

I’ll see if I can create my own icon. Did you animate using an app like Adobe PS?

I just use the built in bubble animation features

MoveIt will let you move anything around the page and rotate either to a deg or non stop rotation. Among the countless uses for it one thing it defiantly does do is give you a massive upperhand as a visual and UX tool.

1 Like

Thanks Andrew, I’m able to get this working, however for my app, most of the workflow actions tend to move to a separate page so I’m not permitted further action after a navigating action. It still works though

Me I just used html and made my own its easy and free lookup if you want free website loading icon html and you copy the code and get the html bubble element and paste the command in there then you can show and hide it in work flow

hey how did you do that?

I just search loading icon and you can go here: https://www.w3schools.com/howto/howto_css_loader.asp

Curious if anyone has a way of showing the loading animation the exact time the page loads rather than waiting for the 5-10 second white screen.

@andrewgassen - tagged you since you’re an admin and use loading animations. Hopefully you’d have an answer lol. Thanks