Forum Academy Marketplace Showcase Pricing Features

Spinning wheel animation while loading

Is there a simple way to show spinning wheel or some other animation while pages are loading or workflow if running? Do most people toggle a gif on popup? I am trying to avoid using a plugin for such a simple thing.

Your help is appreciated.

2 Likes

I use an HTML element. I like SpinKit | Simple CSS Spinners

You can put it in a popup, then on page load show the popup. After that, add another workflow: “Only When” the Page is loaded (entried) is “yes” hide Popup.

Hope this helps! :blush:

5 Likes

Hello!

Another alternative is to use a text element with a font awesome spinner. You can place it anywhere and adjust its height/width/color as needed

Screen Recording 2021-02-14 at 12.08.07.39 AM

3 Likes

Thanks @johnny and @cmarchan. Both seem like amazing options. Will try these out.

Do you mean that I should make a colorless popup and add HTML element that contains the HTML code followed by CSS code? If not, can you please elaborate the process.

I think @johnny was suggesting the following:

2 Likes

@cmarchan The solution you suggested worked like a charm. I was trying to see other options as well. I still don’t understand the logic of how you made the icon spin.

Also, is there a way to hide the popup when an api is done with the task? I am using this on a workflow that uses api. So far I am using 5 seconds pause.

This was either with his font awesome solution, or my HTML spinner solution.

API tasks are already running in the background, why would you need to create a loader for it?

This was with the font awesome that I don’t understand the spinning part but can make it work by simply copying the code from pic.

With your solution, I don’t know how to implement it. Should I just copy html and css code in an html element on a popup?

I am trying to use api tasks on list instead of workflows.

I believe the font awesome element @cmarchan is using is already animated, but for mine all you need to do is use an HTML element, copy the HTML over, add style tags then copy over the CSS.

You can just show the popup before you schedule the list of API workflows, then after you schedule the list of API workflows hide the popup

1 Like

Thanks Johnny. I didn’t know about style tags. Got it working now :grinning:

1 Like

It works. Thank you so much johnny.

For others, it looks not working when i have Repeating Groups.
In this case, follow this awesome man : Add Loading Screen in Repeating Groups | Bubble.io | Nocode tools | EP-26 - YouTube

Hi
wich kind of element the spinnig wheel? just a text element? because if I type this markup I can’t see anything in the page
Thanks