Loading Screen Pro
SVG logo stroke-draw animation overlay — your logo animates on first visit, then fades to reveal your site. Text mode available if you don't have an SVG logo.
- SVG logo animation — stroke draws your logo path-by-path, then fills with color
- Text mode — use initials or short text if you don't have an SVG logo
- Copy-paste install — paste a short snippet into Code Injection, no developer required
- Smart playback — plays once per session or once ever, homepage or all pages
See It in Action
Click "Replay" to re-trigger the animation. Changes in the configurator below update this preview in real-time.
Features
SVG Stroke Animation
Path-by-path draw with configurable stroke duration, fill delay, and stagger timing between elements.
Text Mode
Use initials or short text for sites without SVG logos. Same stroke-draw and fill animation on rendered text paths.
Custom Colors
Configure stroke color, fill color, and background color independently. Match your brand palette exactly.
Smart Timing
Configurable stroke duration, fill duration, fill delay, stagger between elements, and hold time before fade-out.
Page Targeting
Show the loading screen on homepage only, all pages, or specific URL paths. You control where visitors see it.
Reduced Motion
Respects prefers-reduced-motion automatically. Users with motion sensitivity get an instant reveal.
How It Works
Three steps. Under 60 seconds. No developer required.
Purchase and check your email
You'll get a customized code snippet with your domain and chosen config baked in.
Paste into your site-wide Code Injection Header
In Squarespace, go to Settings → Developer Tools → Custom Code → Code Injection → Header. Always use the site-wide header, not per-page injection — the script must load before the page renders to prevent a flash of content. Your showOn setting controls which pages display the animation.
Visit your homepage
The animation plays on first load, then fades to reveal your site. It won't play again until the next session (or ever, if you choose). On pages not matching your showOn setting, the script does nothing.
Requirements
Customize Your Loading Screen
Configure the settings below and watch the preview above update in real-time.
Initials or short text (1-4 characters)
Color of the stroke draw
Color after the fill animation
Overlay background color
How long the stroke draws
How long the fill fades in
Delay before fill starts (after stroke)
How long to hold before fade-out
How large the logo/text appears
Which pages show the loading screen
The animation plays once per browser session. If the visitor closes their browser and comes back, it plays again.
Free vs Pro
| Feature | Free | Pro |
|---|---|---|
| Text mode | ✓ | ✓ |
| Homepage only | ✓ | ✓ |
| SVG logo mode | — | ✓ |
| Custom colors | — | ✓ |
| Timing controls | — | ✓ |
| Page targeting | — | ✓ |
| Stagger/sync modes | — | ✓ |
| Play-once control | — | ✓ |
| Domain-locked license | — | ✓ |
FAQ
How do I install it? +
After purchase, you'll receive an email with a code snippet. Paste it into the site-wide Code Injection Header: Settings → Developer Tools → Custom Code → Code Injection → Header. Don't use per-page injection or the Footer — the script must load before the page renders to prevent a flash of content. The showOn setting in your snippet controls which pages display the animation.
Can I control which pages show the loading screen? +
Yes. The showOn setting controls this. Set it to "homepage" for the homepage only, "all" for every page, or provide a list of specific URL paths like ["/", "/about"]. The snippet goes in your site-wide Code Injection Header regardless — on pages that don't match, the script exits immediately with no visible effect.
Does it work with all Squarespace templates? +
Yes — it works with any Squarespace 7.1 template on a Business (Core) plan or higher. The loading screen is a full-page overlay that sits on top of your site, so it's independent of your template's layout.
Can I use my logo? +
Yes — provide your SVG markup and the animation will stroke-draw each path element. If you don't have an SVG logo, text mode uses initials or short text with the same stroke-draw effect. Contact us if you need help converting your logo to SVG.
Will it slow down my site? +
No. The animation is CSS-based and lightweight — no external libraries or heavy assets. The overlay is removed from the DOM after the animation completes, leaving zero footprint on your page.
What if it doesn't work for me? +
We offer a 30-day money-back guarantee. If you're not satisfied for any reason, email us for a full refund.
Can I use it on multiple sites? +
Each license is for one domain. Contact us for volume discounts if you have multiple sites.
Get Loading Screen Pro
Your customized loading screen is ready. Enter your domain to complete your purchase.
e.g., myblog.com or mysite.squarespace.com