Add a Page Loading Screen to Squarespace

Have you ever clicked on a link—only to stare at a blank white screen while the page loads?

You know the feeling. You sit there debating whether to wait and see if the website loads…or just hit that back arrow and go back to the search results. Without a loading screen or animation, you don’t even know if the website is loading or just stuck!

You definitely don’t want YOUR website to be the one that leaves visitors stuck on a blank screen. It hurts your user experience and your Squarespace SEO, decreasing your website traffic.

So, what should you do?

You can increase your user’s experience and your site’s professionalism by adding a preloader, or page loading screen.

What is a Preloader?

Commonly known as a loading page or loading screen, a preloader is the temporary page that shows when visitors first click on one of your links. It serves as a placeholder until your page loads. Once your page is fully loaded, the preloader closes and visitors will see the page they clicked on.

When it comes to designing a preloader, there are actually a lot of options. Some websites use a loading bar or circle icon to indicate the page is loading. Others use gifs or icon animations to keep visitors’ attention while the page is loading.

I do offer a plugin that allows you to create a custom loading page with your logo. But if you’re looking for a simple placeholder, there is an easy way to add a preloader to your website for free!

How to Create a Loading Screen with Loading.io

Loading.io is a website that offers CSS spinners and icon animations for loading pages. Their simple CSS spinners are open source, so you can simply copy the CSS and html from Loading.io, and paste it into your Squarespace website.

In the tutorial video below, I show you how to add a classic loading screen to your own Squarespace website. The code snippets from Loading.io are posted below the video.

The following code is used in the video.

Header Code Injection

<!-- Loading Screen -->
<div id="loadingscreen"><div id="loading"><div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div>
<!-- End of Loading Screen -->

Footer Code Injection

<script>
  window.addEventListener("load", function(){ 
    var loadingscreen = document.getElementById("loadingscreen");
    document.body.removeChild(loadingscreen); 
  });
</script>

CSS

#loadingscreen{
  background: #000; 
  opacity: 1; 
  position: fixed; 
  z-index:10; top: 0px; 
  width: 100%; 
  height: 1600px; 
} 
#loadingscreen > #loading {
  color:#FFF;
  width:120px; 
  height:24px; 
  margin: 300px auto; 
}
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-spinner div {
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
100% {
  opacity: 0;
  }
}

If you would like your preloader to look more sophisticated, Loading.io offers many options for loading screen animations. You can select one of their other free CSS spinners, purchase an animated icon from their gallery of loader animations, or opt to use a progress bar instead.

Loading.io progress bar styles

Or maybe a loading pattern would work better for you! Whatever your preferences, Loading.io offers a wide variety of animation options for your website preloader.

Sample Loading.io background loading screens

Why Won’t Your Website Load Instantly?

Having a loading page for your Squarespace website improves your user experience, but you’re probably wondering – why do you need a preloader in the first place?

Why can’t you just optimize your website for page speed?

Well, there are definitely several things you can do to optimize your page speeds. Images are usually the biggest page speed killer, so I recommend starting off by optimizing your images.

I also have a tutorial on how to optimize your Squarespace site for speed with effective ways to improve your loading times.

However, Squarespace has a lot of built-in code that automatically slows your page speeds down. No matter how much you optimize your Squarespace website, you probably won’t be able to bring down your loading time to 2 seconds like Google recommends.

This is one of the reasons website developers say Squarespace is bad for SEO, although page speed is just one small factor in Google’s algorithm and doesn’t mean that your website can’t rank on the first page.

If you’ve optimized your site as much as you can and it is still slow, then it’s time to get creative. And that’s where a fun loading screen comes in. Whether you opt for a simple loading animation, an icon animation, or a background screen, say goodbye to a blank white screen forever!

Want to use your own logo instead?

Check out the Custom Loading Screen Plugin available in our shop!

Here are some other posts you may like:

• How to Add an Overlay to a Specific Page on Your Squarespace Website

• How to Edit the Mobile Logo on Your Squarespace Website

• How to Hide the Header and Footer to Create a Cover Page