Spinning wheel animation while loading

Questions
1

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.

4 Likes
2

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:

7 Likes
3

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

8 Likes
5

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

6

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.

7

I think @johnny was suggesting the following:

Screen Recording 2021-02-15 at 02.47.45.67 PM

2 Likes
8

@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.

9

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?

10

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.

11

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
12

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

1 Like
13

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

1 Like
14

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

15

What if the API I am calling takes 4 - 10 seconds to load. Is there a way to show the spinning Icon while it is processing (after you click submit and before the response is shown)?

16

You could do something like: Tracking The Progress Of Recursive Workflows In Bubble

1 Like
17

What you can also do is show your spinner as soon as you make your call and hide it in the moment you receive the return.

If you save your callback in a custom state, you can easily hide your spinner once that custom state is no longer empty.

1 Like
18

WHAT!!! I never knew about these. Thats great, your the man.

1 Like