Custom Loading Screen

What does this code do?

These code snippets allow you to add a loading screen with a pulsing logo to Squarespace.

Prepare Your Logo

Prepare the logo or image you would like to use on your loading screen. This works best if it is a square image. Make sure you compress the image so that the file is no larger than 500KB or it will slow down your website.

Upload this file to Design > Custom CSS > Manage Custom Files. The click on the file to insert the url into the Custom CSS Section. Copy this url and save it for the next step. Then delete the url out of the Custom CSS Section.

Code Snippets

Copy and paste this code into Settings > Advanced > Code Injection > Header

<!-- Loading Screen -->
 <div class="loadingscreen">
      <span class="loading"><span class="loader-inner"><img class="logo-pulse" src="IMAGE URL" alt="ALTERNATE TEXT"></span></span>
 </div>
<!-- End of Loading Screen -->

Insert your Image Url from the previous step and add some alternate text in case your image isn’t supported.

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Loading Screen -->
<script>
   document.body.classList.add("stop-scrolling");
    window.onload = function() {
      document.body.classList.remove("stop-scrolling"); 
      document.getElementById("header").style.visibility = "visible";
      document.querySelectorAll(".loadingscreen").forEach(x => x.style.display = "none");
    };
</script>
<!-- End of Loading Screen -->

Copy and paste this code into Design > Custom CSS

/* Loading Screen */
.stop-scrolling { 
    height: 100%; 
    overflow: hidden; 
} 
#header {
  visibility: hidden;
}

.loadingscreen {
  position: absolute;
  background: #fff;
  opacity: 1;
  z-index: 2000;
  width: 100%;
}

.loadingscreen > .loading {
  background: #FFF;  
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.loading img {
   height: 200px;
   width: 200px;
}

.logo-pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 0.7;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;	
	}			
}

Bonus 1: Does your loading screen disappear too fast?

If your website loads really fast, you may find that it just flickers your loading screen. This isn't necessarily a bad thing as that means your website has a fast page loading time which is great for search engine optimization. However, you may want the loading screen to stay for just a little longer so that visitors see your logo.

If you want to delay the loading screen from disappearing, then replace the code in Settings > Advanced > Code Injection > Footer with the code below.

The number 2000 delays the loading screen for 2 seconds. You can change this number to have it delay however long you like. Just be sure to not keep your visitors waiting too long!

<!-- Loading Screen -->
<script>
  document.body.classList.add("stop-scrolling");
  window.onload = function() {
    document.getElementById("header").style.visibility = "visible";
    setTimeout(function() {
      document.body.classList.remove("stop-scrolling");
      document.querySelectorAll(".loadingscreen").forEach(x => x.style.display = "none");
    }, 2000);
  };
</script>
<!-- End of Loading Screen —>

Bonus 2: I want to only display the loading screen on the first page they come to.

You may only want the loading screen to display the first time a visitor comes to the site. In that case, replace the code in Settings > Advanced > Code Injection > Footer with the code below.

The number 2000 delays the loading screen for 2 seconds. You can change this number to have it delay however long you like. Just be sure to not keep your visitors waiting too long!

Note: You may see the Loading Screen flash on all pages while in the Squarespace Editor, but it should resolve itself on the live site.

<!-- Loading Screen -->
<script>
  function loadingRemove() {
    document.querySelectorAll(".loadingscreen").forEach((x) => (x.style.display = "none"));
    document.body.classList.remove("stop-scrolling");
  }

  const firstVisit = localStorage.getItem("visited");
  if (firstVisit == null) {
    document.body.classList.add("stop-scrolling");
    document.getElementById("header").style.visibility = "visible";
    window.setInterval(loadingRemove, 2000); //show loading for 3 seconds on first load
    localStorage.setItem("visited", 1);
  } else {
    document.getElementById("header").style.visibility = "visible";
    loadingRemove();
  }       
</script>
<!-- End of Loading Screen -->

How To Use It

1. Copy and paste the code snippet as indicated above.

2. Insert the image url and alternate text.

3. Edit the loading screen colour and image size.

4. This landing page is set up to pulse the logo image. Feel free to delete this part of the code if you do not want an animation or to change it to a different animation.

   Note: If you change the animation name in Design > Custom CSS, you will also need to change it in Settings > Advanced > Code Injection > Header