Loading Overlay

Full-screen overlay with backdrop blur, centered card, and native Spinner control. 4 properties, 5 controls. Toggle visibility to show during async operations.

Not sure which loading component to use?

Loading Overlay ← you are here

Sits on top of existing screen content. Use for mid-session operations — button clicks, data refreshes, form submissions. The app is already running.

Visible = varIsLoading

Loading Screen →

Full branded splash screen. Use once at app launch during App.OnStart to load data and authenticate. Replaces the entire screen.

Visible = !gAppReady || !IsReady

cmpLoadingSpinner.yaml

1. Go to the Components tab (right side panel, next to Screens)
2. Click New component — this creates a blank component
3. Click outside the new component to deselect it
4. Paste the YAML with Ctrl+V / ⌘V

Preview

Click Demo to see the overlay in action

Installation

This component requires Modern controls to be enabled. Settings → Updates → Preview → Modern controls and themes

# In Power Apps Studio:
1. Components tab → New component → Import from code
2. Paste the full YAML definition
3. Add the component to any screen
4. Set Visible = varIsLoading to toggle

Usage

Basic — show during data load

// Place on screen, control with a variable
cmpLoadingSpinner.Visible = varIsLoading

// In a button's OnSelect:
Set(varIsLoading, true);
ClearCollect(colData, MyDataSource);
Set(varIsLoading, false)

Dynamic loading text

cmpLoadingSpinner.LoadingText = varLoadingMessage

Set(varIsLoading, true);
Set(varLoadingMessage, "Loading users...");
ClearCollect(colUsers, Users);
Set(varLoadingMessage, "Loading products...");
ClearCollect(colProducts, Products);
Set(varLoadingMessage, "Finalizing...");
Set(varIsLoading, false)

Dark theme, heavier overlay

cmpLoadingSpinner.Theme = "Dark"
cmpLoadingSpinner.OverlayOpacity = 0.5
cmpLoadingSpinner.LoadingText = "Please wait..."

Properties

Input

Property	Type	Default
`LoadingText` Message displayed below the spinner. Bind to a variable for multi-step feedback.	Text	"Loading..."
`OverlayOpacity` Background overlay darkness from 0 (transparent) to 1 (solid black).	Number	0.3
`ShowBlur` Apply CSS backdrop-filter blur to the overlay. Disable for better performance on older devices.	Boolean	true
`Theme` "Light" or "Dark". Controls the card background and text color.	Text	"Light"

No output properties or events. Toggle visibility with Visible = varIsLoading.

Implementation Details

Backdrop blur

Uses an HtmlViewer with CSS backdrop-filter: blur(6px) and -webkit-backdrop-filter for Safari. The blur is optional via ShowBlur — disable on low-end devices for better performance.

Responsive centering

The card uses AutoLayout containers with LayoutJustifyContent.Center and LayoutAlignItems.Center. Card width scales from 300px to 35% of the screen, capped at Parent.Width - 32. Height scales 18–25% of screen height with a 150px minimum.

Modern controls

Uses the native Spinner@1.4.6 and Text@0.0.51 modern controls. These require the modern controls preview feature to be enabled in Settings → Upcoming features → Preview.

Self-contained

No external dependencies — all colors are computed from the Theme property. No design system tokens or global variables required. Drop onto any screen and set Visible to control.

Examples

Data loading (default)

cmpLoadingSpinner.Visible = varIsLoading

// Button OnSelect:
Set(varIsLoading, true);
ClearCollect(colData,
    Filter(DataSource, Status = "Active")
);
Set(varIsLoading, false)

Dark theme, heavier overlay

Please wait...

cmpLoadingSpinner.Theme = "Dark"
cmpLoadingSpinner.OverlayOpacity = 0.5
cmpLoadingSpinner.LoadingText = "Please wait..."

Multi-step loading

Click Run demo to see steps cycle

cmpLoadingSpinner.LoadingText = varMsg

Set(varIsLoading, true);
Set(varMsg, "Loading users...");
ClearCollect(colUsers, Users);
Set(varMsg, "Loading products...");
ClearCollect(colProducts, Products);
Set(varMsg, "Finalizing...");
Set(varIsLoading, false)

Architecture

5 controls — HtmlViewer overlay + 2 GroupContainers + Spinner + Text.

4 properties — all input. No output properties or events.

Default size — App.Width × App.Height (full-screen).

cmpLoadingSpinner (App.Width × App.Height, Fill: transparent)
├── htmlOverlay (HtmlViewer)
│   └── <div> rgba(0,0,0, OverlayOpacity) + backdrop-filter: blur(6px)
└── cntLoadingRoot (GroupContainer, AutoLayout)
    └── cntSpinnerCard (GroupContainer, AutoLayout)
        ├── Fill: theme-aware white/dark
        ├── Width: Min(Max(300, 35%), Parent - 32)
        ├── DropShadow: Bold
        ├── spnLoading (Spinner@1.4.6)
        └── lblLoadingText (Text@0.0.51)
            └── Text: LoadingText property

Community

Use the toolbar to format · or type markdown directly