Preloader
Also called: loading screen, splash loader, intro loader, page loader.
A full screen shown while a heavy site loads, before you can use it, often with only a logo and a percentage. When loading is done, it slides or fades away.
Before a heavy site can be used, a preloader covers the whole screen with a logo and a count. When loading is done, it lifts away.
0%
60%
100%
Loaded
Say it in a prompt
Add a preloader: a full-screen #D2FF00 panel with the logo in the middle and a 0 to 100% counter under it in a monospace font. When the page has loaded, slide the panel up and out with transform over 600ms. Skip it for returning visitors, and with reduced motion just hide it. Seen on
- Lando Norris: While the site loads, the whole screen is bright lime with only the small "LN" logo.
- Messenger by abeto: The screen stays blank white while the 3D world loads, then the planet appears.
You might describe it as
- whole screen is one color with a logo before the site opens
- loading screen with a percent counter
- curtain that lifts when the site is ready
Not to be confused with
- Spinner
A preloader covers the whole screen until the site is ready; a spinner is a small sign of waiting inside a page.
- Skeleton screen
A preloader hides the whole site until it has loaded; a skeleton screen shows the page's shape at once and fills it in.