Loading Overlay
A region-blocking loading overlay with a blur-dim, a spinner or progress ring, status text that swaps, cancel, and inert content underneath with aria-busy.
Preview
Import · invoices.csv
Determinate
INV-2041Oct 1$1,284.50
INV-2017Sep 1$1,284.50
INV-1993Aug 1$1,102.00
INV-1968Jul 1$1,102.00
62%Importing 1,284 rows…62 percent
Reconcile
INV-2041Oct 1$1,284.50
INV-2017Sep 1$1,284.50
INV-1993Aug 1$1,102.00
INV-1968Jul 1$1,102.00
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| loading | boolean | — | Block the region: content goes inert, the region gets aria-busy. Required. |
| status | ReactNode | — | What's happening; swaps in place when it changes. |
| progress | number | — | 0 to 1 for a determinate ring with a percentage; omit for a spinner. |
| onCancel / cancelLabel | () => void / string | — / "Cancel" | Shows a Cancel button. |
| delay | number | 150 | Ms to wait before showing, so quick loads never flash. |
| appearance | "card" | "bare" | "card" | A raised panel, or just the indicator. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.