Loading Animation for Squarespace

Important Update
Squarespace has adjusted their favicon html which caused blank screens with previous installations of this plugin. I’ve updated the code below to fix those issues and prevent this from happening in the future.

In a perfect world, your websites would load immediately. However, we don’t live in a perfect world. For example, there are truly people in this world who believe that Friends is better than The Office. Stunning.

So, living in the reality that websites sometimes don’t load fast, let’s add a loading animation to our Squarespace website that at least makes the experience of waiting for the website a bit better.

In this tutorial I’m going to walk through building a loading animation that automatically imports the favicon (browser icon) of your website and makes it bounce (through CSS animations) until the page is fully loaded.

First, if you want to make your page load faster, here are the most important things you can do:

Have less photos
Compress your photos (websiteplanet.com, compressjeg.com, tinypng.com) to under 500 kb
Don’t use background videos in your First section of your site. Background videos aren’t native to Squarespace — they load up from Youtube or Vimeo — so they load AFTER the page loads. This can make the page feel slow.

Notice a common theme? Want your site to be faster? Focus on Images & Videos.

Now, onto the tutorial.

Project breakdown

So here is the big picture breakdown of what we’re going to do:

Build the HTML structure for the loading animation
Add CSS to layout our HTML
Add the animation
Add javascript to pull the favicon and remove the loading screen once page has loaded.

Tools

CSS Animations - This isn’t so much a tool than it is a concept, but if you don’t know anything about this, you can just copy the code in the tutorial.

Build the HTML structure

What we want is a full height & width background, with an image in the middle. So very simply, the HTML structure would look like this:


 <div id="full-height-width-background">
   <div class="loading-graphic-container">
 	 <!-- Graphic Goes Here -->
   </div>
 </div>

Layout the Content

So first off, during this step, the loading animation will always be playing. This obviously isn’t what we want in the end, but it’ll be good while we edit it. We’ll work on turning it off through javascript in the next step.

First we want the background to take up the full width of whatever screen we’re on to cover up anything happening on the screen and we want to center the loading animation within it. Here are some CSS properties that can accomplish everything we’re trying to do.


#wm-loading-animation{
  position:fixed; /* makes this element fixed on the screen */
  z-index:9999999; /* positions the element on top of everything*/
  height:100vh;	/* full height */
  width:100vw;	/* full width */
  background:#333;
  display:flex;
  justify-content:center; /* horizontally centers elements- needs display:flex; */
  align-items:center; /* vertically centers elements - needs display:flex; */
}
#wm-loading-animation.hide-animation{
  display:none; /*Hide this element after load*/
}

Build the Animation

Now we want to animate the icon to bounce a little. If you’re unfamiliar with CSS animations, we add an animation property to the targeted element and then we create the animation using “keyframes”. Check out the code below for my version of how to do this:


#wm-loading-animation{
  position:fixed; 
  z-index:9999999;
  height:100vh;
  width:100vw;
  background:#333;
  display:flex;
  justify-content:center;
  align-items:center;
  animation: pulse 3s ease-in-out infinite;
}
#wm-loading-animation.hide-animation{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s,
      opacity 1s linear; /*Hide this element after load*/
}
@keyframes pulse {
  0%   {transform: scale(1);} /* At 0% of the interval listed in the animation above*/
  50%   {transform: scale(1.3);}
  100%   {transform: scale(1);}
}

Add the Javascript

Finally, we need to add some javascript to:

Grab the favicon image and add it to our HTML.
Remove the loading animation once the page has loaded.
Add a timer as a backup, in case the page never fully loads, to remove the loading animation (nothing kills the user experience like a loading animation that doesn’t go away)
Add another timer to set the minimum amount of time the animation should run (if the page loads really fast, the animation will just be a flash)


<script>
  (function() {
    //Get Favicon & Set it
    function getUrl(){
      let faviconLink = document.querySelector('link[rel="icon"]');
      if (!faviconLink) return;
      let url = faviconLink.getAttribute("href");
      document.querySelector("#wm-loading-animation img").setAttribute("src", url);
    }
    getUrl();

    //Hide the Animation
    function hideAnimation(){ 
      document.querySelector("#wm-loading-animation").classList.add("hide-animation");
    }

    //Wait until page has loaded
    setTimeout(function(){ //Wait a minimum amount of time before the follow
      setTimeout(function(){  //backup in case the page doesn't fully load
        hideAnimation()
      }, 500);
      let checkLoad = setInterval(function(){ //run this funciton every 100 milliseconds
        if (document.readyState === "complete"){ //if page status is loaded then continue
          hideAnimation();
          clearInterval(checkLoad) //stop the interval
        }
      }, 100);
    }, 1500);
  }());
</script>

There we go, now we have a super simple loading animation for our Squarespace website.

The Code

View Code

Javascript + HTML

Place this code in the Settings » Advanced » Code Injection » Site HEADER Code Injection area


<!--Loading Animation From Will-Myers.com-->
<!-- Loading Animation HTML -->
<div id="wm-loading-animation"> <div class="loading-graphic"> <img src=""> </div> </div>
<!-- Loading Animation Javascript -->
<script>
  !function(){function t(){document.querySelector("#wm-loading-animation").classList.add("hide-animation")}!function t(){let e=document.querySelector('link[rel="icon"]');if(!e)return;let n=e.getAttribute("href");document.querySelector("#wm-loading-animation img").setAttribute("src",n)}(),setTimeout(function(){setTimeout(function(){t()},500);let e=setInterval(function(){"complete"===document.readyState&&(t(),clearInterval(e))},100)},1500)}();
</script>
<!--END Loading Animation From Will-Myers.com-->

CSS

Add this to your Design » Custom CSS area


/*Loading Animation from Will-Myers.com*/
#wm-loading-animation{
  position:fixed; 
  z-index:9999999;
  height:100vh;
  width:100vw;
  background:#333;
  display:flex;
  justify-content:center;
  align-items:center;
}
.loading-graphic{
  animation: pulse 3s ease-in-out infinite;
}
#wm-loading-animation.hide-animation{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s,
      opacity 1s linear; /*Hide this element after load*/
}
@keyframes pulse {
  0%   {transform: scale(1);}
  50%   {transform: scale(1.3);}
  100%   {transform: scale(1);}
}
/*End Loading Animation from Will-Myers.com*/

Use Custom Image

Add this into the Page Header Code Injection area


 <div id="wm-loading-animation">
   <div class="loading-graphic">
     <img src="https://images.unsplash.com/photo-1612455897608-ea374d1e87f2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2555&q=80">
   </div>
 </div>
 <script>
  function hideAnimation(){
    document.querySelector("#wm-loading-animation").classList.add("hide-animation");
  }
  setTimeout(function(){ 
    setTimeout(function(){ 
      hideAnimation()
    }, 500); 
    let checkLoad = setInterval(function(){
      if (document.readyState === "complete"){
        hideAnimation();
        clearInterval(checkLoad)
      }
    }, 100);
  }, 1500);
 </script>

Add this into your Design » Custom CSS area


#wm-loading-animation img{
  height:150px;
  width:auto;
}
#wm-loading-animation{
  height:100vh;
  width:100vw;
  background:#999;
  position:fixed;
  z-index: 99999;

  display:flex;
  align-items:center;
  justify-content:center;
}

.wm-slider-container .dots-container{
  left: unset !important;
  transform: unset !important;
  right: 3vw
}

@keyframes pulse{
  0%{ transform:scale(1.1)} 
  50%{ transform:scale(0.9)} 
  100%{ transform:scale(1.1)} 
}

.loading-graphic{
  animation: pulse 3s ease-in-out infinite;
}

#wm-loading-animation.hide-animation{
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s,
    opacity 1s linear; /*Hide this element after load*/
}