Adding loading spinners to a bubble app

Hi guys, does anyone know of a trick (maybe some CSS or plugin) which we can use to automatically add loading spinners across our Bubble app and on buttons any time a workflow takes more than a few seconds to load?

Or is this something that we need to add manually, by placing loading spinners manually on all the buttons and using custom states at the beginning and end of workflows etc.

Loading spinners are a basic way to improve the UX on an app, letting users know what’s going on so if we can find a simple way to do this across an entire app, I think it will be helpful for other Bubble users in the community.

Any help is much appreciated, thanks guys!

Just add an icon via workflow and rotate it.

That’s one option but we would need to put them manually on all of the buttons. I wasn’t sure if there was a simple HTML header we could place on the page to accomplish the same goal in a 15 minutes vs. 6 or 7 hours going through all the buttons in the app

You can you a HTML/CSS spinner. I like SpinKit | Simple CSS Spinners, just paste the HTML into the HTML element, then create inline CSS for the CSS portion.

6 Likes

Hi @johnny

Thanks for this. Can you please give more details for the newbies ?

How do you create inline CSS for the CSS portion ?

Thanks.
Ulrich

Nice one. Didn´t know that.

How do you create the inline CSS?

There is an HTML element on the editor.

Creating inline CSS required using the <style> and </style> tags

1 Like

This is what my element inline looks like, the html in the <div> tag and the css in the <style> tag were pulled directly from the resource Johnny suggested earlier.

3 Likes

Regarding the workflow however, It takes 3 or 4 seconds before the spinner pops up. I set a custom state (yes/no) to “yes” when the button is clicked which triggers the visibility of the spinner. Anyone know a better way to do this so that it appears immediately?

I would recommend just adding it to a popup, then under the “On page load” action show the popup, then create a “When true” workflow for “Page load (entried) is “yes”” hide the popup

2 Likes

Thanks Johnny i’ll give it a try!

1 Like

I’ve been using Zeroqode’s Loading Spinner plugin and I’ve been super happy with it…

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