Demo to preview the plugin:
Introduction
This Plugin allows you to add an animated spinner with a Fullscreen loading mask to show the user that the page is loading/preloading.
You can choose between 7 different kinds of spinners and can choose whatever color you want for the background.
With this Plugin you can greatly enhance the user experience by showing the user that your website is currently loading data/elements using a beautiful full screen loading mask.
You can trigger the loading animation within a workflow and choose the timeToFade, the Loading spinner color and the spinner type.
How to setup
- Add the Element to the Page
- Go to the Design tab in your Bubble editor.
- Search for the element called Full-Page Loading.
- Drag this element onto your page.
- Use the Workflows
- Full Page Loader Full-Page Loading
- Use it at the beginning of a workflow that takes time, such as API calls, data loading, or page navigation.
- Stop Loader Full-Page Loading
- Use it after your long-running actions are complete to remove the visual indicator.
This plugin provides two workflow actions:
This action shows the full-screen loader.
This action hides the full-screen loader.
Plugin Element Properties
Full-Page Loading
Element Actions
Full Page Loader
Title | Description | Type |
Background Color | Background Color refers to the color used as the backdrop in a graphical user interface or on a webpage. | Color |
Time To Hide | Duration it takes for an element or to become hidden from view (ms) | Number |
Spinner Type | Type of spinner animation. Available options: spinner1, spinner2, spinner3, spinner4, spinner5, spinner6, spinner7 | Dropdown |
Stop Loader
