Build a Spinning Wheel Loading Screen

Web design is full of really big images, fonts, and other files these days. They look great once they load, but for users accessing via slower connections, they can result in a lousy experience as your website slowly downloads. The solution? Show a nice loading screen while your users wait for everything to arrive.

There are many ways to create a loading screen. Some use an animated GIF, others use Flash, and others just the word "Loading…" We found the spin.js method to be best for a number of reasons: it's easy to implement, it's easy to customize, and there are no image files to hassle with. Here, we make it even easier for you by providing an implementation guide with all the code you need to set up your spinner.

Check out this demo to see how it looks. (Because this page is already loaded, we have the demo set to run for two seconds and then go away.)

Want this on your website? Here's what you do…

Download a copy of spin.min.js and save it on your server. Then, after updating the path to spin.min.js, place this code in between <head> and </head> on your page:

1.   <script src=""></script>
2.   <script src="../js/spin.min.js"></script>
3.   <script>
4.   	$(document).ready(function() {
5.   		var h = $(document).height();
6.   		var w = $(document).width();
7.   		$('#loading').height(h);
8.   		$('#loading').width(w);
9.   		var top = $(window).height() / 2;
10.  		var left = $(window).width() / 2;
11.  		var opts={lines:13,length:28,width:14,radius:42,scale:0.2,corners:1,color:'#FFFFFF',opacity:0.25,rotate:0,direction:1,speed:1,trail:60,fps:20,zIndex:2e9,className:'spinner',top:top + 'px',left:left + 'px',shadow:false,hwaccel:false,position:'absolute'};
12.  		var target = document.getElementById('loading');
13.  		var spinner = new Spinner(opts).spin(target);
14.  	});
15.  	$(window).load(function() {
16.  		$('#loading').fadeOut(1000);
17.  	});
18.  </script>
19.  <style type="text/css">
20.  	#loading { z-index:100; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; background-color:black; }
21.  </style>

And, place this just after your <body> tag:

1.   <div id="loading"></div>

That's it! Pretty easy, right?

If you'd like, you can quit here. But if you're wanting to know how everything works (so you can customize it further), keep reading.

Line 1 is loading jQuery, line 2 is loading the spin.js script.

In Lines 5 - 8, we figure out the document height and width (often bigger than the window height and width) and set the loading div to cover all of it. Note: We set both to 100% of the window with CSS on Line 20, but the only way to get it to expand over everything (even the stuff that you have to scroll to) is by using JavaScript.

Lines 9 and 10 figure out the center points of the viewable window and save them as variables to be sent to spin.js.

Line 11 sets the options for the spinner. To see what all of these do, check out the Usage section of And then Lines 12 and 13 tell the spinner to start spinning.

In Lines 15 - 17, we use jQuery's ready method to hide the loading div after all the page's elements have been downloaded to the user. Caution: This waits for everything. So, if you have an add that's broken, for example, your spinner will never go away.

Finally, Lines 19 - 21 set the style of the loading div with CSS. This obviously can be (and should be) moved into your main stylesheet instead. We just included it here for the sake of simplicity.

The <div> tag itself should be pretty self-explanatory. Make sure not to forget it, though, or your spinner won't have a place to live!

1 Comment

May 12, 2016, 12:06 pm
Great! Thanks for the help!

Leave a Comment

Name and email are required. Your email will not be published.

This post was published on September 25th, 2015 by Robert James Reese. Before using any of the code or other content in this post, you must read and agree to our Terms & Conditions.