Block UI / Loading Overlays
Overlay patterns to block user interaction during async operations.
Basic Block UI
Block a content area with a semi-transparent overlay and spinner.
| # | Name | Role | Status |
|---|---|---|---|
| 1 | Alice Johnson | Designer | Active |
| 2 | Bob Smith | Developer | Pending |
| 3 | Carol Lee | Manager | Active |
Block with Message
Overlay with a customizable loading message below the spinner.
This panel contains important content that will be blocked during loading.
The overlay displays a spinner with a descriptive message so users know what is happening.
Block with Progress
Overlay with a progress bar that animates from 0 to 100%, then auto-unblocks.
| # | Name | Role | Status |
|---|---|---|---|
| 1 | Alice Johnson | Designer | Active |
| 2 | Bob Smith | Developer | Pending |
| 3 | Carol Lee | Manager | Active |
Block Card
Block individual cards independently. Blocking one does not affect the others.
Analytics
Card content for the analytics section.
Reports
Card content for the reports section.
Settings
Card content for the settings section.
Full Page Block
Fixed viewport overlay with large spinner. Auto-unblocks after 3 seconds or click to dismiss.
Custom Spinners Block
Four different spinner styles used in block overlays.
Border Spinner
Sample blocked content area.
Dots Spinner
Sample blocked content area.
Pulse Spinner
Sample blocked content area.
Bar Spinner
Sample blocked content area.
Block Form
Blocks a form during submission, then shows a success state before unblocking.
Skeleton Loading
Alternative to blocking: animated skeleton placeholders that resolve into real content.