Loading Animation

Details

This plugin allows you to add a loading animation (overlay) with a text and an animated icon on top of a container within your bubble application. You can choose the effect, color, text, text position and background color of the animation. In total there are 16 different effects you can choose from. You can also decide whether to use a timed loading animation or a constant one. A timed loading animation will be displayed for a certain period of time as specified by you (3 seconds for example) whereas a constant loading animation will stop once you trigger the Stop action within a workflow. You can use this plugin to greatly enhance the user experience, such as displaying a loading animation on top of the signup group after a user signs up. The loading animation works best on top of groups, we haven't tested it on all bubble elements.
For a demo please visit: https://3dimage.bubbleapps.io/loading_animation

Icons made by https://www.flaticon.com/authors/iconixar iconixar from www.flaticon.com Flaticon.

Categories

Productivity, Technical, Media, Containers, Mobile

Types

Background Services, Action

Links

Service Link:

https://www.rapidevelopers.com

Instructions

After installing the plugin, head over to Settings->General and expose the option to add id attributes to html elements.You will have access to three different plugin actions within your workflows under the plugin submenu.
1. You can use a timed loading animation to show a loading animation on top of a container for a certain period of time (in milliseconds). Add an unique element ID to the container you want to target and use the same ID within the Element ID field of the plugin.

2. You can use a constant loading animation to show the loading animation until you manually stop it. The procedure is the same as for the timed loading animation, except that you don't set the duration of the animation. In order to stop the animation, you will have to trigger the "Stop Loading Animation" action within your workflows and target the element where the animation was applied.

‍