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 manua…

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

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

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 . [spinner]

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

Thanks Johnny i’ll give it a try!

Adding loading spinners to a bubble app

Need help

johnny January 1, 2021, 11:03pm 4

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.

Topic		Replies	Views
Spinning wheel animation while loading Questions	16	11456	January 7, 2023
Creating a Page Loading/Page In progress Indicator Responsiveness	14	6072	December 22, 2022
How to display a loader when a page is loading Need help	4	5791	November 27, 2022
Adding something visual using Page HTML Header Need help	3	903	November 20, 2021
Loading spinner Need help	4	1572	December 7, 2022

Adding loading spinners to a bubble app

Related topics