Loading Screen

What You'll Create

A branded loading screen that displays when visitors first arrive at your site, then fades away to reveal your content. Show your logo, a custom animation, or any design element while the page loads.

The Problem It Solves

Squarespace doesn't include a native loading screen feature. When you want to create a polished first impression with a branded intro screen, or hide content until the page is ready, you need custom code. This technique creates a professional splash screen experience.

Perfect For

Branded site introductions, Portfolio splash screens, Agency presentations, Product launch pages, High-end client sites.

What Makes This Different

The loading screen is built using a regular footer section that you can design with any content - images, text, animations, or your logo. The code fixes this section to cover the entire viewport, then fades it away after a set time. You can optionally make it appear only once per session, so returning visitors skip straight to content.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Footer section designed as your loading screen content

• Toolkit Title: Loading Screen

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