Dedicated forum thread: https://forum.bubble.io/t/new-plugin-loading-overlay-animations/124269
Demo page
Introduction
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.
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."
Features
The following Overlays can be used:
- Full-Screen Overlay
- Element Overlay
- Text Overlay
- Image Overlay
How to Setup
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 display 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 a 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 that says: "Expose the option to add an ID attribute to HTML Elements.".
See a short guide here: https://docs.rapidevelopers.com/how-to-assign-an-id-to-the-element
After checking this box you can add an ID attribute to all your elements within the element inspector.
Enter a 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.
Frequently Asked Questions
Have a question, or suggestion, or encountered an issue? 🤷♂️
Please contact us by sending an email to: support@rapidevelopers.com
Want to report a bug? Please follow this guideline!