Preloader
Page-load curtain that counts up, holds a beat, then reveals the page.
motionloading
Customize
Loading
Duration2.2s
Use Refresh Preview to replay.
Readout
Label
Show percent
Reveal
Curtain exit
Style
Backdrop
Accent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
duration | number | 2.2 | Simulated load time in seconds. |
variant | "counter" | "bar" | "dots" | "counter" | Progress readout style. |
reveal | "up" | "down" | "split" | "fade" | "up" | How the curtain exits once loading completes. |
backdrop | "ink" | "surface" | "brand" | "ink" | Curtain surface. |
accent | string | "var(--brand)" | Accent color for the counter / bar / dots. |
label | string | "Loading" | Status label announced to assistive tech. |
showPercent | boolean | true | Show the numeric percentage. |
onComplete | () => void | — | Called once, when the curtain starts revealing. |