Back to Motion Prompt examples
Landing page & web effects · #17
Preloader
A screen shown while the page loads. On a navy screen the number under the logo counts from 0% to 100%; then the screen lifts away and the page underneath fades in.
Loading, navigation & ambient loopspreloaderloading-screenloaderpercentageintrosplashcurtain
Full motion specification
How the movement works
Use it on image- or video-heavy sites to turn the loading wait into a brand moment.
- 01A navy screen fills the viewport with a logo, a number (28 px) and a bar (180 × 4).
- 020→100% at 0.25–2.1 s (cubic ease-out, rounded to whole numbers); the bar fills in orange at the same rate.
- 03At 2.3–2.85 s the whole screen moves up 168 px and out (cubic ease-in-out).
- 04The page heading and photo fade in 0→1 and rise from 14 px below at 2.35–2.95 s (cubic ease-out).
- 05At 4.25–4.75 s the screen comes back down from the top, at 0% (the next load).
Prompt
Make a preloader for the site: logo and a percentage, and the screen lifts away at 100%.