Loading Spinner

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

cmpLoadingSpinner.yaml

Import via Components → New component → Import from code → paste YAML

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

// Bind LoadingText to a variable for multi-step feedback
cmpLoadingSpinner.LoadingText = varLoadingMessage

// Multi-step process
Set(varIsLoading, true);

Set(varLoadingMessage, "Loading users...");
ClearCollect(colUsers, Users);

Set(varLoadingMessage, "Loading products...");
ClearCollect(colProducts, Products);

Set(varLoadingMessage, "Finalizing...");
// Process data...

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 withLayoutJustifyContent.Center andLayoutAlignItems.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 andText@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

// Bind LoadingText to a variable
cmpLoadingSpinner.LoadingText = varMsg

// Multi-step process
Set(varIsLoading, true);

Set(varMsg, "Loading users...");
ClearCollect(colUsers, Users);

Set(varMsg, "Loading products...");
ClearCollect(colProducts, Products);

Set(varMsg, "Finalizing...");
// Process data...

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