CSS3 Only Spinner Full Page Solution

Everybody’s doing it! Just search for CSS3 spinner on the intererweb or visit codepen.io and you will find a variety of spinners. One thing that they all seem to have in common is that they don’t give you the complete solution, i.e. how to make the darn thing run on a web page and disappear when you want it to. This post seeks to address this, along with the sister post about a loading image spinner. Right down to business!

We are going to create a simple web page that on load shows a full screen spinner with overlay until the whole page has loaded, then the spinner will disappear. I am going to use a forced delay on the image used in this example so that the spinner will always show.

The html is fairly simple, a normal page setup. In the body you will see a div with class “loading” which sets up the spinner. Below that I have an image to load, this uses a redirect to http://deelay.me which slows down the loading of the image, thus slowing down the loading of the page. This just helps to see the spinner animation at work. In production one would remove this redirect (unless you wanted it there!). There are also a few lines to help overcome any issues with earlier version of of IE for the poor souls who still struggle along with that browser!

Grabbed this example from the intereweb here. Not going to go into great depth about spinners as there is so much about them elsewhere. Suffice to say there are no images used in the creation of the spinner, it is all done using CSS3.

Now this is the part that seems to be missing from nearly every single spinner tutorial and demo on the web, how to get the darned thing to run properly on your web page. It is done with a small piece of jQuery (which I confess I rarely use), so you need to call in the jQuery library first. Then a function that takes action to fade out the spinner once the page has loaded. Simple? I couldn’t get this to work at first, but got some great support from Stu over on cssplay.co.uk, to get the JS and HTML correct.

OK, if we put the whole page together we end up with this:

Here is a link to my example above

Full Page Spinner

What you should see is a page load to a semi-transparent spinner (so you can see the title) then after a couple of seconds the image loads and the spinner quickly fades away.

Don’t profess to know or understand all the ins and outs in relation to any of the above, just that is works.

Related post: CSS3 Only Spinner Image Solution

One thought on “CSS3 Only Spinner Full Page Solution

  1. Pingback: CSS3 Only Spinner Image Solution | METRIC RAT

Leave a Reply

Your email address will not be published. Required fields are marked *