This plugin lets you add an engaging loading screen with a small built-in mini game to your Bubble app. Instead of showing a static loader, you can keep users entertained while your app’s content loads in the background. It adds a playful and interactive element that makes the waiting experience feel smoother and more enjoyable.
When the loading screen is triggered in your Bubble app, users will see animated loading rings with a small red ball. The goal is to guide the red ball into the center of the rings while the app continues loading behind the scenes. You can customize how long the loading screen stays visible, as well as adjust the background color, spinner color, and spinner size to match your app’s look and feel.
Please note that this plugin currently works best on desktop browsers and is not supported on mobile devices.
Prerequisites
Before setting up the plugin in your Bubble app, make sure:
• You have installed the plugin from the Bubble Plugin Marketplace.
• Your app is running on a desktop or web environment (not mobile).
• You have a workflow event or condition where you want the loading screen to appear, such as when a page or API call is loading.
How to setup
Step 1 – Install the Plugin
Go to the Plugin Tab
Open your Bubble Editor.
Navigate to the Plugins tab on the left panel.
Add Plugins
Once in the Plugins tab, click the Add Plugins button.
Search for the Plugin
Use the search bar to type Loading Screen with Mini Game.
Locate the plugin in the search results.
Install/Buy
If the plugin is free, click Install to add it to your application.
For a paid plugin, click Buy/Subscribe and follow the purchase instructions.
Payment Information (For Paid Plugins)
If the plugin is a paid one, fill in your payment details and make payment.
Charges will be added to your Bubble billing account.
Remember, if you unsubscribe from the plugin shortly after installation, charges will be prorated based on the days used.
Plugin Installed
Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.
Step 2 – Add the Plugin Element to Your Page
Open the Design tab in your Bubble editor.
Search for the Loader Game element in the Elements panel.
You’ll see one option:
Loader Game
Drag and drop the element onto your page.
Step 3 – Setup Page Elements
To set up the plugin in your Bubble app, you’ll need to add a few elements to your page that allow you to control and trigger the loading screen. This setup gives you flexibility to customize the experience and easily activate the animation through your workflows.
Background Color Picker
Add a color picker element to your page. This controls the background color of the loading screen. Choose any color that fits your app’s design or theme to make the loading screen blend seamlessly with your interface.
Spinner Color Picker
Add another color picker to define the spinner color. This sets the color of the loading spinner users will see while waiting, allowing you to keep the visuals consistent with your app’s style.
Duration Input
Place an input element on the page to set how long the loading screen stays visible. Once the time elapses, the loading screen will disappear and reveal your main content.
Initiate Loading Button
Add a button that will trigger the loading screen. You can name this button InitiateLoadingScreen. When clicked, it will activate the plugin and display the interactive loading animation with the mini-game.
Step 4 – Setup Workflow
To trigger the loading screen, you’ll need to set up a workflow connected to your Initiate Loading Screen button. This workflow will run the plugin action.
Action: Initiate Loading A Loader Game
In the workflow editor, add a new action under Plugins and choose Initiate Loading A Loader Game. This is the main action that triggers the interactive loading screen with the mini-game.
Element
From the action settings, select the Loader Game element you’ve placed on your page. This tells Bubble which instance of the plugin should run when the action is executed.
Background Color
In the Background Color field, reference the value from your Background Color Picker element. This ensures that the loading screen’s background dynamically reflects the color selected by the user or set in your design.
Loader Color
For the Loader Color field, reference the value from your Spinner Color Picker element. This controls the color of the loading spinner, allowing you to customize the visual appearance to match your app’s theme.
Duration
In the Duration field, reference the value from your Duration Input element. This determines how long the loading screen remains visible before transitioning back to your main content.
Once all fields are configured, preview your app. When the Initiate Loading Screen button is clicked, the workflow will run and display the loading animation using the values you’ve set. The background color, spinner color, and duration will all adapt dynamically based on the elements on your page.
Plugin Element Properties - Loader Game
Element Actions
Initate Loading - triggers the interactive loading screen and starts the mini-game. Use this action to display the loader when your app is processing data or transitioning between pages.
Title
Description
Type
Background
Sets the background color of the loading screen. You can define a static color or reference a dynamic color value from your page.
Color
Loader Color
Defines the color of the loading spinner. This can also be set dynamically through workflows or color pickers.
Color
Duration
Controls how long the loading animation remains active, measured in milliseconds. For example, a value of 3000 keeps the loader visible for 3 seconds.
