Loading●
%
Percentile
A hairline rule and a counting number, and nothing else.
Copy the prompt, ship the loaderLoading screens
Loading screens
worth the wait.
Twelve preloaders built as pure CSS, running live on this page. Take the one you want and copy the prompt that rebuilds it, written precisely enough for any AI builder to follow.
- 12
- Preloaders
- 0
- Dependencies
- CSS
- Only, no JS
- 100%
- Prompt included
12 showing
Progress
One moment
Loading
Rendering
Composing
Polishing
Loading
Rolodex
Four words snap through a single-line mask.
Orrery
Three rings, three speeds, one still centre.
PRELUDE
Ascender
Letters rise through a blur and settle into the word.
Filling
Meniscus
Two waves cross a rising body of water.
Prelude
Ready
Proscenium
Panels part, hold the reveal, and close again.
Pebble
One shape flexing, with an outline running behind it.
Cascade
A pulse crosses a grid of cells on the diagonal.
Monogram
A mark draws itself on, then off the far end.
Loading✳Loading✳Loading✳Loading✳Loading✳Loading✳Loading✳Loading✳
Loading✳Loading✳Loading✳Loading✳Loading✳Loading✳Loading✳Loading✳
Please hold
Prelude✳Prelude✳Prelude✳Prelude✳Prelude✳Prelude✳Prelude✳Prelude✳
Prelude✳Prelude✳Prelude✳Prelude✳Prelude✳Prelude✳Prelude✳Prelude✳
Ticker
Two rows of type running against each other.
Iris
Six petals open from the centre like a shutter.
Wireframe
A sheen sweeps a page that has not arrived yet.
Three steps, and none of them are npm install.
- 01
Pick a loader
Every card on this page is the real animation running live, not a recording. Open one fullscreen to see it the way a visitor would meet it.
- 02
Copy the prompt
Each loader ships with a written brief covering structure, timing, easing and the loop, specific enough that a builder does not have to guess.
- 03
Paste and adjust
Drop it into your AI builder, then change the word, the palette or the duration. The prompts are written to be edited, not treated as fixed.
Questions,
answered.
What exactly gets copied?
A written brief for that specific loader. It names the layout, the element sizes, the keyframe percentages, the easing curves and the loop length, plus the reduced-motion behaviour. It is written as instructions to follow rather than as a description of the result.
Do I need a motion library?
No. Every loader here is CSS keyframes and plain markup, with the counter in Percentile driven by an animated custom property rather than a timer. Nothing on this page imports an animation package.
Will these work outside React?
Yes. The prompts describe structure and motion, not framework syntax, so the same brief produces a working loader in React, Vue, Svelte or a plain HTML file. Only the markup wrapper changes.
Why do the previews stop when I scroll past?
Each card pauses its animation once it leaves the viewport and resumes when it comes back. Twelve loops running at once is a lot of work for a browser to do for motion nobody is looking at.
What happens with reduced motion turned on?
Every loader freezes on a deliberately chosen frame rather than disappearing. The frame is picked per design, so the curtain shows its reveal and the aperture shows itself open, instead of every card resting on an empty first frame.
