Bubble Tutorial - Loading Animation for Repeating Group

In this video you will learn how to create a loading animation in Bubble. Especially with repeating groups with a lot of data, it sometimes takes a while until the repeating group is loaded. Here, a loading animation helps the user. The animation shows the user that the computer is working. We create this better user experience (UX) in Bubble through a plugin. The plugin is called Animated Loaders by Yong https://bubble.io/plugin/animated-loaders-1553729425930x287123392710311940

Video transcripts

Hello, my name is Chris Strobl and today I'm going to show you how we can create a loading animation in the bubble. We have 50 users here with the Random User Generator API that are created, both with profile picture and other stuff and so it takes a bit of time. If you are interested in how to use Random User Generator and then create demo profiles, I have another video for you up here.

To make the loading animation, we go to Plugins. And install the plugin Animate Loader. As soon as you have done that, we go back into the designte and we see two different loaders in Visual Elements: Red Plain Loader and the Spinning Loader. I myself use each spinning or we now drag this into the canvas centre. This element is now visible and Page is loaded. We set a conditional. We say namely If the Repeating Group of list of users. So the content there the count is greater than zero. That is, the Repeating Group is loaded because the number of elements is greater than zero, then this element is no longer visible. We now go to Preview to see the whole thing in its entirety. You have seen the loading animation and then the whole repeating group loads at once. And so we could see how we can relatively easily insert the bubble loading animation to always give the user a good feeling that something is happening.

If you liked this video, feel free to click the like button or subscribe to our channel if you have any questions. Feel free to write us comments. I wish you continued success with Bubble and see you soon.