Tutorial + Code: https://www.will-myers.com/articles/loading-animation-in-squarespace
Learn CSS For Squarespace: https://www.will-myers.com/learn-css-in-squarespace
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 pulse (through CSS animations) until the page is fully loaded.
Timeline:
0:00 - Introduction
2:30 - Build HTML
3:46 - CSS Layout
9:04 - Javascript
15:39 - CSS Animation
Facebook: https://www.facebook.com/willmyethewebsiteguy
Newsletter: https://www.will-myers.com/
