How to design a custom loading screen in Bubble.io: Step-by-Step Guide

Go to the Design tab and open the page where you want a loading screen. Click the + icon, search for Group, and drag it onto the page. Name it Group Loading Screen. Set it to a Fixed layout with width and height both at 100% of the page. Set the background color to match your brand (or white). Set the z-index to a high value (999) by right-clicking and selecting Bring to front repeatedly or using the Element Tree to ensure it sits above everything. Check Visible on page load.

Inside Group Loading Screen, add an Image element centered vertically and horizontally. Upload your brand logo or icon. Below it, add an HTML element for a CSS-animated spinner. In the HTML element, paste a CSS spinner code that creates a rotating circle animation. Size the HTML element to about 40x40 pixels and center it below the logo.

1<style>
2.spinner {
3  width: 40px;
4  height: 40px;
5  border: 4px solid #e0e0e0;
6  border-top: 4px solid #3498db;
7  border-radius: 50%;
8  animation: spin 1s linear infinite;
9}
10@keyframes spin {
11  0% { transform: rotate(0deg); }
12  100% { transform: rotate(360deg); }
13}
14</style>
15<div class="spinner"></div>

Go to the Workflow tab and create a new workflow: When Page is loaded (entire page). Add an action: Element Actions then Hide Group Loading Screen with an animation (Fade out works well, set to 300-500ms). The Page is loaded event fires when all page elements and initial data sources have finished loading. The fade-out provides a smooth transition from the loading screen to the actual page content.

For pages with heavy data loads, the Page is loaded event may fire before all Repeating Group data is ready. To handle this, add a fallback: create a Do when condition is true workflow that checks if your main Repeating Group's list count > 0. When true, hide the loading screen. Also add a safety timeout: use a workflow triggered by Page is loaded that schedules a custom event to hide the loading screen after 5 seconds maximum, ensuring the loading screen never gets stuck indefinitely.