Creating a loading screen in HTML5

Question

I am having some issues finding a decent tutorial for generating a loading style screen with regards to HTML5. To be quite honest I'm not sure exactly where to begin...

My project is essentially a simple HTML5 game, where I'll be loading in various sprite sheets and tilesets. They'll be reasonably small, but I'd like to show a little loading spinner instead of a blank screen while all the resources are loaded.

Much appreciated if somebody could point me in the right direction, be it decent links or code samples to get me going...my Google-fu is lacking today!

---

For clarification, I need to figure out how to load the resources themselves, as opposed to finding a spinner. For instance, how to calculate that X% has loaded.

---

Edit 2

Silly me, I can just check for <variable>.image.complete. Voted to close.

Answer 1

This website is excellent for animated loading gifs: http://ajaxload.info/. An overlay can be used to display the image and also prevent interaction with the page while it is loading. You can use a div, position it above everything else (z-index) and set the width and height to 100%.