Animate a site’s loading

Note: This article has been marked for a quality review and will soon be updated.

There are a lot of things we can do as web designers to improve the UX of a site, much of the time subtle animations can be added to add a bit of finesse to a page, and a new trend is that of adding animations to the loading of pages to make it look a bit better. So what do I mean by 'loading animations'? I'm not talking about the annoying "feature" of having a site load in a flash and then display a loading spinner while it actually pulls up the content using AJAX; rather adding a tiny amount of code to gain more control over how our site loads. But before we jump in to the code we need to remember a couple of things: first the animations can't take very long, after all we're trying to improve the user experience, so having a site take 5 seconds to load in will just frustrate the user. And second, as we will be using JavaScript for this, we need to add a fallback in case it's turned off.

Here's what we'll be creating (new window).

So to begin I've written up a very simple page, here's the HTML:

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Animated Loading</title>
	<!--[if IE]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<div class="wrapper">
		<header>
			<h1 class="left">My Website</h1>
			<nav>
				<ul>
					<li>Home</li>
					<li>More</li>
					<li>About</li>
					<li>Contact</li>
				</ul>
			</nav>
		</header>
		<section class="hidden">
			<h2>Welcome</h2>
			<p>Yay for loading animations!</p>
		</section>
		<footer class="hidden">
			<p>Copyright goes here</p>
		</footer>
	</div>
</body>
</html>

Notice the use of the class "hidden" - that does exactly what you might think, and to make sure it actually works, let's hook up the CSS:

/* Globals */
.wrapper {
	max-width:1200px;
	display: block;
	margin:0 auto;
	padding:0 10px;
}

.hidden {
	display: none;
}

.left { float:left; }
.right { float:right; }

body {
	background: #dfdfdf;
}

/* Header */
header {
	overflow: hidden;
	position: relative;
	top:-145px;
}

h1 {
	background: #222;
	padding:50px;
	font-size: 2.5em;
	line-height: 0.4em;
	color: #fff;
}
		
nav {
	float: right;
}

	nav li {
		padding-top:52px;
		float: left;
		width:91px;
		text-align: center;
		height:90px;
		cursor: pointer;
		margin-right:2px;
		display: none;
	}
	
/* Sections */
section {
	margin-top:2%;
	padding:2%;
	background: #fff;
	overflow: hidden;
}
	
	section h2 {
		font-size: 1.25em;
		font-weight: bold;
	}

/* Footer */
footer {
	text-align: center;
	padding-top:10px;
}

Again, some very basic CSS to ensure it actually looks like a functional website. Notice how elements such as the 'nav li' elements are hidden using CSS (you might want to just add a class in the HTML, but if they are dynamically generated, this is your best bet).

If we open the page now we don't see very much, some would say it was blank, many people actually. This is what users without JavaScript enabled will see. So to remedy that we need to make use of the <noscript> tag in our header. Just before the closing <head> tag, add the following code:

<noscript>
	<style type="text/css">
		header {
			top:0px !important;
		}
		
		section, footer, nav li {
			display: block !important;
		}
	</style>
</noscript>

That code will only be executed if we don't have access to JavaScript, and so will force the elements we worked so hard to hide, to show up. Good stuff, we're not breaking the internet by requiring JavaScript! And on that note, let's write some.

Here's the code I wrote for the example - it's very basic, and executes within 2.45 seconds (but because some animations are in parallel it feels like 1.25 seconds). Make sure you include jQuery on your page, and then whack in the following code:

$(function(){
	/* Loading Animations */
	$('header').animate({'top':0},500, function(){
		$('nav li').each(function(index){
			$(this).slideDown(300*(index+1));
		});
		
		$('section, footer').fadeIn(750).removeClass('hidden');
	});
	

	$('a:link').click(function(){
		$('header').animate({'top':'-185px'},300);
		$('section, footer').fadeOut(300);
	});
});    		 

The first part of the that code waits for the DOM to be fully loaded, and then animates the header to slide in. When the header has finished showing up we cycle through the navigation's list elements, sliding them down at a growing animation length (notice the '+1' to ensure we don't multiply by zero). Once that's done we fade in any other elements we had hidden, and remove the class of 'hidden' - here you could use another each() cycle, but in the interests of speed I just stuck with a simple fade in effect. The next block of code is for links away from the page. We look for any links, and then whenever they are clicked, we quickly animate the contents of the page out in 0.3 seconds - I think this is just a nice touch. With a bit of tweaking of things like timings and the odd animation, you can make a visitor smile before they've even read what's on your site.

And that's how to improve the UX of your websites with subtle loading animations.

Spice up your Hyperlinks!

Now the words 'hyperlink' and 'sexy' rarely frequent the same sentence in my household, but something which appears to have come into fashion lately (namely I'm using it ;)) is the fading in of the hover state on hyperlinks. So instead of simply specifying the :hover state in your CSS, you use JavaScript or CSS3 to spice up the whole hovering thing. Here's what we will be creating, now lets see how we might go about doing it.

First off let's take a look at the CSS3 way - apparently all the cool kids are using it. If we had a link which we wanted to 'sexify' we might do something like:

.spice {
	color:blue;	
	transition: all .2s linear;
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
}

	.spice:hover {
		color: red;
	}

Bam! Right there we have one sexy hyperlink using only one CSS3 transition. So when we hover over a link with the class of 'spice' we should see it fade to a lovely bright red, and then upon mousing out, back to that delicious blue. But what happens if (God forbid) a user visits in IE8 or something?! We have support for Opera, Firefox, Chrome and Safari, but not IE. Well surprise surprise we need to have a fall-back for older browsers. And for that, we will be using jQuery (other JavaScript frameworks are available).

Before we continue I should add that I would always suggest using the CSS3 way over the jQuery method, but in any case this is how we do it:

$(function(){
	var color = '';
	
	$('.spice-jq').hover(function(){
		color = $(this).css('color');
		$(this).animate({'color':'red'},200);
	}, function(){
		$(this).animate({'color':color},200);
	})
});    		

Above we first wait for the DOM to be finished loading, and then create ourselves a variable called 'color' to hold the value of the link's colour in it's normal state (if all your links are the same colour, you can just replace every occurrence of 'color' with whatever colour you want). We then animate the colour of the link back and fourth using the hover() function. But before you wonder why the code above doesn't work on your site, I should add that for colour animations, the jQuery Color Plugin is required - so go ahead and include that in your page before the above script.

So now we could using something like Modernizr to detect if the user's browser has CSS3 transitions support, and if not, whack the above jQuery code onto our page. And with that, you should now have a set of beautiful links on your site that make it that little bit slicker.

Building a Confirmation Dialog in JavaScript

Note: This article has been marked for a quality review and will soon be updated.

A common feature of desktop applications is that when a user prompts a potentially destructive action, the program will display a confirmation dialog to ensure that the user doesn't go and do something silly. To do this we will use some basic JavaScript. In this tutorial I will be using jQuery to display and manipulate our elements, but this technique uses good old' JavaScript to get the job done. So let's get started. Click here to see the finished product.

Thee are a few ways to do this, namely we could create a global variable and wait for it to be changed by our dialog function and then proceed; or we could have our function return either true or false based on the user input, and then carry on. However the method we will be using will be to mole net a function that accepts a callback function as one of its parameters. If the user confirms the action the callback function will be called, and of not we will simply hide our dialog and do nothing. So with that in mind, lets create the HTML for our dialog. Here's what I've got:

<span class="lightswitch" style="display:none">
<div class="confirm" style="display:none">
	<div class="wrapper">
		<h3>Are you sure?
		<p>This will clear all the changes you have made.

<button class="left" id="confirm-continue">Continue <button class="right" id="confirm-cancel">Cancel </div> </div>

So we have 2 elements to worry about here - the .lightswitch span, and our .confirm div. The light-switch code will be used to dim the rest of the screen while the dialog is open to ensure focus is directed to whatever we want to put on our pop-up. All that's left is to style our dialog - feel free to go mad with your CSS at this point, but this is what I ended up with:

.right { float:right; }
.left { float: left; }

.confirm {
	display: block;
	width:350px;
	left:50%;
	top:50%;
	margin-top:-100px;
	margin-left:-175px;
	z-index: 1500;
	overflow: hidden;
	cursor: default;
	position: fixed;
	background: #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

	.confirm .wrapper {
		padding-bottom:10px;
		overflow: hidden;
		font-family: sans-serif;
		color: #000;
	}

	.confirm span {
		width: 90%;
		margin:0 5%;
		display: block;
	}
	
	.confirm h3 {
		background: #212121;
		font-size: 22px;
		color: #fff;
		width:91%;
		padding:2% 5%;
		margin:0;
		border-radius: 4px 4px 0 0;
		-moz-border-radius: 4px 4px 0 0;
		-webkit-border-radius: 4px 4px 0 0;
	}
	
	.confirm button {
		border:none;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		color: #fff;
		background: #212121;
		padding:5px 10px;
		font-size: 15px;
	}

.lightswitch {
	display: block;
	background: rgba(0,0,0,0.75);
	z-index:1000;
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	position: fixed;
	overflow: hidden;
}

The CSS above gives us a centred box with a dimmed background overlaid on top of the rest of the page. The rest of it is just basic styling that you'll want to change to fit with your own UI.

And now to the JavaScript! Here's how it looks:

function confirmIt(title,text,callback){
	$('body').append('');
	$('.lightswitch').fadeIn(300, function(){
		$('.confirm').fadeIn(100);
	});
	
	$('#confirm-continue').click(callback);
	$('#confirm-cancel').click(function(){ $('h1 span').text('Action Cancelled'); })
	
	$('.confirm button').click(function(){
		$('.confirm').fadeOut(500, function(){
			$('.lightswitch').fadeOut(200, function(){
				$('.confirm, .lightswitch').remove();
			});
		})
	});
}			

Let's go through what it does. On the first line we can see the 3 parameters we pass to the function for the title, text, and callback function for our dialog. If the user confirms the action they initiated the callback function will be called, and if not, the action will be cancelled. The function beings by appending the HTML we wrote earlier to the end of our page and then fades-in our .lightswitch to dim the background; and when that completes it fades in the actual confirmation dialog. That's the first part sorted.

We then have to set up some event handlers - for when the user clicks "Continue" and when they click "Cancel". For our continue button we can simply use the function passed to us to confirm the action was intended. We could leave our cancel button without an event handler, but in our case we will change the content of our main heading to reflect the user's choice. But neither of those lines actually get rid of our dialog, so even if the user confirmed/canceled the action our box would still be visible. So to remove it from the screen we will bind a function to the click events of both buttons. In that function we simply reverse the fading-in of the elements, and then remove them from the DOM to ensure we don't go having multiple elements with the same IDs in the future.

And with that we are finished! We now have a good system in place to ensure our users don't accidentally delete or perform some other destructive action on their data.

Adding subtle user feedback

We all hate waiting for websites to load right? It's annoying to watch images download and wait for Twitter streams to render isn't it? Well it's a fact that 99% of websites have this issue - that is, that load time is about 1 or 2 seconds. Now for companies like Google it isn't an issue, they have enough money to ensure they have sites that load instantly; but for us average folk what can we do? Investing in new and expensive serves often isn't an option, so one method I propose is creating subtle user feedback.

One way to accomplish this is to go all AJAX, instead of letting the browser jump between pages, simply load they pages using Javascript and fade in a loading animation while you do just that. Great, problem solved. Or is it? What about large sites that are already up and running? Is it a good idea to re-write a lot of code? Well while AJAX will provide you with the most control over UX, I propose a slightly different method, details of which follow.

I recently finished work on a site which has a load time of about 1 second - pretty average stuff. But I wasn't happy with just providing the normal experience. I thought about fading/sliding in individual elements when the page had fully loaded (much like Apple now does on it's product pages. But the problem with that is, if done incorrectly, you end up extending the load time of a site, and no matter how nice an effect might look, if it harms the end user-experience, it's best to leave it out (at this point I should say that if you load a page and then send multiple requests for more data, and then fade them in, that makes sense). So I came up with a simple solution - add a loading header graphic. Allow me to elaborate.

Instead of simply loading a page with the normal logo of the site in the header, I load a GIF that looks exactly like the header graphic (minus the text), and once the page has finished loading (courtesy of jQuery), I swap the images out. So what does it look like? Head over to Cooking Pete (shameless plug I know) to see the effect in action.

I used the:

$(document).ready(function(){  });

Function to allow me to detect the fully loaded DOM, and then simply change the src attribute of my header graphic.

And that's it! Adding simple user feedback like that let's your users know that the site is doing something, and doesn't leave them in the dark.