Page Loading Animation with Custom GIF

What You'll Create

A custom loading animation that displays while your page loads, then gracefully fades away to reveal your content. Use any animated GIF you want—your logo animation, a branded spinner, or a creative loading graphic.

The Problem It Solves

Squarespace pages can sometimes take a moment to fully load, especially with large images or complex layouts. Without a loading screen, visitors see content popping in piece by piece, which looks unpolished. There's no built-in way to show a branded loading animation.

Perfect For

Branded site introductions, Portfolio splash screens, High-end client presentations, Product launch pages, Sites with heavy imagery

What Makes This Different

This technique creates a fullscreen overlay with your custom GIF that automatically fades out after a set time (5 seconds by default). You control the background color, GIF size, and fade timing. There's also an option to show the loading screen only once per visitor session—so returning visitors or those navigating between pages don't see it repeatedly. The overlay disappears in the Squarespace editor so you can work normally.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Animated GIF uploaded to your Squarespace files or hosted elsewhere

• Toolkit Title: Loading GIF

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support