Intro CSS animations and loading screens are controversial among web developers and designers. I personally think transitions visually indicate to users that they have left the current page and are navigating to a new location. I also hate to see my website load some font, a pixelated header image, or clunky animations that look great on my local machine but terrible across the Internet.
In this tutorial, we’ll create a CSS loading animation using Spinkit, a CSS animation plugin that offers various animated icons, and Modernizr to create fallbacks for older web browsers.
Warning: Older web browsers cannot process CSS3 animations, which means we need to be prepared for your grandparents using dial-up AOL like it’s 1998.
What you need for a loading screen animation
- A loading screen .gif
Basic structure of the CSS loading screen
Easy peasy chicken breezy. We’ve created a div that will act as the background and will contain your loading spinner. When you look at your page, you’ll have just a blank white screen.
Here are some key things to know about our styles:
- The height and width cover the entire page
- The z-index allows us to tell the browser that our background appears above everything else on the page
- The position tells the browser that even if the user scrolls, the screen stays in the window
Adding the Spinkit styles
We have a blank screen but no CSS loading animation and the screen doesn’t go away. Let’s add the sweet Spinkit animation first.
I’m going to go with the soft, pulsing circle… so calming. Even if my visitors never get to the page, they’ll get really comfortable in their seats and might even forget they are trying to load a website as they fall into a trance.
Warning: Small pulsing circle animations do not guarantee visitor satisfaction if your website blows. Pulsing circles have been known to cause sudden and intense euphoria.
Adding jQuery animation after browser has loaded
We are now the proud parents of a blank white screen and a pulsing black circle. Let’s add some jQuery to remove the animation first, then the blank screen after the contents of site has been loaded.
Solving fallback issues
Now that we have a kick-ass CSS loading screen with sweet pulsing-circle action, we need to make sure that grandma can see the site on her Commodore 64. I’ll be using Modernizr to detect whether or not the user has specific features available on their machine and create controls based on the features available.
First, download Modernizr and add the link to your footer. Unfortunately, Modernizr cannot be used over a CDN. For the sake of this exercise, you only need to download CSS Animations from the Modernizr download package.
In the following code, I’ll be creating the logic to decide how to handle the animation when animations are not available due to older browsers.
If the user doesn’t have JS
Adding a fallback gif
With older browsers, namely Internet Explorer, we won’t be able to show our amazeballs animations. Instead, we have to show a .gif in it’s place like it’s 2003. Grab a free spinny gif from Preloaders and save it in your img folder.
Danger: If you pronounce .gif like the peanut-butter brand Jif, you’ll be cursed with cats making bread on your keyboard forever.
This is the magic of Modernizr at work. Modernizr will detect whether or not the CSS animations are available from the browser version. In our case, we only want to show the loading fallback if CSS animations aren’t available but not when we want to display our ultra-awesome pulsing circle.
You are now the proud owner of a sweet pulsing-circle-loading-screen. Maybe something isn’t matching up in the code you’ve written? Check out the demo to compare notes.