# How to design a custom loading screen in Bubble.io: Step-by-Step Guide
- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026
## TL;DR
Design a custom loading screen in Bubble by creating a full-page overlay group with branded visuals and an animated spinner, then hiding it when data finishes loading using the Page is loaded event. This gives users a polished first impression instead of watching elements pop in one by one.
## Overview: Designing a Custom Loading Screen in Bubble
This tutorial shows you how to build a branded loading screen in Bubble that displays while your page data loads. You will create a full-page overlay group, add your logo and a CSS-animated spinner, trigger the hide animation when the page finishes loading, and handle edge cases for slow data. This is essential for apps with complex pages where elements load sequentially.
## Before you start
- A Bubble account with an existing app
- Your brand logo or icon image
- Basic understanding of Bubble's Design tab and Groups
- Familiarity with workflows and the Page is loaded event
## Step-by-step guide
### 1. Create the loading overlay group
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.
**Expected result:** A full-page overlay group covers the entire page and is visible when the page first loads.
### 2. Add your brand logo and spinner
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.
```
```
> Pro tip: Change #3498db to your brand's primary color for a cohesive look.
**Expected result:** The loading screen shows your logo above a smoothly rotating spinner animation.
### 3. Hide the loading screen when the page loads
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.
> Pro tip: Use the Animate element action with a fade-out instead of just toggling visibility for a more polished transition.
**Expected result:** The loading screen smoothly fades out once the page and its data have finished loading.
### 4. Handle slow data loads with additional conditions
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.
**Expected result:** The loading screen hides either when data is ready or after a maximum timeout, whichever comes first.
## Complete code example
File: `Workflow summary`
```text
CUSTOM LOADING SCREEN — WORKFLOW SUMMARY
==========================================
PAGE ELEMENTS:
Group Loading Screen
Layout: Fixed
Width: 100%
Height: 100%
Background: #FFFFFF (or brand color)
Z-index: 999 (front of all elements)
Visible on page load: YES
Children:
- Image: Brand logo (centered)
- HTML Element: CSS spinner animation
- Text: "Loading..." (optional)
CSS SPINNER CODE (in HTML element):
WORKFLOW 1: Hide on page load
Event: Page is loaded (entire page)
Action 1: Animate Group Loading Screen
Animation: Fade out
Duration: 400ms
Action 2: Hide Group Loading Screen
(after animation completes)
WORKFLOW 2: Data-dependent hide (optional)
Event: Do when condition is true
Condition: RepeatingGroup Main's List of Things:count > 0
Run once: yes
Action: Animate + Hide Group Loading Screen
WORKFLOW 3: Safety timeout
Event: Page is loaded
Action: Schedule custom event hide_loading
Delay: 5 seconds
Custom event hide_loading:
Only when: Group Loading Screen is visible
Action: Animate + Hide Group Loading Screen
```
## Common mistakes
- **Forgetting to set Visible on page load for the loading group** — If the group is not visible on load, users see the page building itself instead of the loading screen Fix: Check the Visible on page load checkbox on Group Loading Screen in the Property Editor.
- **Not adding a safety timeout** — If the Page is loaded event fails to fire or data takes too long, the loading screen can get stuck permanently Fix: Add a scheduled custom event that hides the loading screen after 5-10 seconds as a fallback.
- **Setting the loading group z-index too low** — Other elements may render on top of the loading screen, creating a broken visual experience Fix: Use Bring to front in the right-click menu or ensure the loading group is the last element in the Element Tree.
## Best practices
- Use your brand colors and logo for a professional, consistent loading experience
- Add a fade-out animation (300-500ms) for a smooth transition instead of instant hide
- Include a safety timeout to prevent the loading screen from ever getting stuck
- Keep the spinner simple — complex animations increase page weight and defeat the purpose
- Set the overlay z-index high enough to cover all page elements
- Test on slower connections to verify the loading screen displays long enough to be useful
## Frequently asked questions
### Does the loading screen affect SEO?
Minimally. Search engine crawlers process the page HTML, not the visual rendering. However, if important content is hidden behind the overlay for too long, it could affect perceived performance metrics.
### Can I use a GIF instead of CSS animation?
Yes. Replace the HTML spinner element with an Image element containing an animated GIF. However, CSS animations are lighter weight and more customizable.
### Will this work on mobile devices?
Yes. The 100% width and height settings ensure the overlay covers the full screen on all device sizes. Test at mobile breakpoints to verify the logo and spinner are centered.
### Can I show a progress bar instead of a spinner?
A true progress bar is difficult because Bubble does not expose page load percentage. You can simulate it with a timed animation that fills over 2-3 seconds, but it is decorative rather than accurate.
### Does the loading screen cost workload units?
No. The loading screen uses only client-side elements (Groups, HTML, conditionals) which do not consume workload units.
### Can RapidDev help with performance optimization?
Yes. RapidDev specializes in Bubble development and can help optimize page load performance, implement advanced loading patterns, and ensure your app feels fast on all devices.
---
Source: https://www.rapidevelopers.com/bubble-tutorial/design-a-custom-loading-screen-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/design-a-custom-loading-screen-in-bubble