Percentage Ring Preloader
A hairline SVG ring draws from 0 to 100% around a tabular serif counter; at 100 the ring swells to 14× and fades, the number slides out of its mask, and a simple page appears as its headline lines rise one after another. Replay included.
- Preloaders
- gsap
- svg
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1208 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Counter Preloader with Split Reveal
A full-screen preloader counts 0→100 in a huge serif numeral while a hairline fills; the number and label slide out of their masks, two panels split open and the hero headline rises as its image settles from 1.15 to 1.
- gsap
- splittext
light Word Cycle Preloader
Five brand words slide up through a mask one after another — each arriving and leaving with a slight blur over a thin progress line — then the last word stays, scales via Flip into the page headline's exact position and the rest of the page rises beneath it.
- gsap
- flip
light Morphing SVG Preloader
A glowing SVG form morphs circle → square → blob → star → mark while a hairline outline traces each new shape and a percentage climbs; at 100% the form scales 40× to fill the viewport and fades into the page.
- gsap
- svg
light Image Stack Shuffle Preloader
Six procedural prints sit in a fanned stack; every 0.35s the back card cuts to the front with Flip (fresh rotation jitter each time) while a counter runs 0→100, then the top print expands via Flip.fit into the page's hero image and the headline rises.
- gsap
- flip