Bubble - Loading Overlay Plugin

Overview

This Plugin allows you to display a variety of different overlay Screens which can be used as a Loading Screen or as a Transition screen for your application. The following Overlays can be used:

• Full-Screen Overlay

• Element Overlay

• Text Overlay

• Image Overlay

With this Plugin you have access to multiple overlays which can help you to increase the user experience of your app and improve the design. For example, you can add an "Element Overlay" to certain elements after the user has performed a certain action to indicate that a workflow is running. Furthermore you can basically create your own loading overlay by just uploading any image you want and using an "Image Overlay."

For a demo of this Plugin please visit: https://loadingoverlay.bubbleapps.io/

Icons made by https://www.flaticon.com/authors/freepik" from Flaticon is licensed by Creative Commons BY 3.0.

Instructions

After you have installed this Plugin, you have access to 4 different actions via the Plugins submenu when creating a workflow. The following actions are included:

• Full-Screen Overlay

• Element Overlay

• Text Overlay

• Image Overlay

Choose the overlay you want to be displayed and enter the different parameters that are required, such as the duration of the overlay, the background color, the image, the text etc. You can trigger the overlays within your workflow, for example after an user has clicked a button.

In order for the Element Overlay to work, you will have to go to the settings menu of your app and under "General" check the box which says: "Expose the option to add an ID attribute to HTML Elements." . After checking this box you can add an ID attribute to all your elements within the element inspector. Enter an unique id for the element where the overlay should be applied and insert the same id into the "Element Id" field within the Element Overlay action.