CSS3 Only Spinner Image Solution

As you may have seen from my other post CSS3 Only Spinner Full Page Solution, everyone is good at making spinners and putting up demos, but hardly anyone publishes the full solution on how to make it work. Attempt to put that right here. Admittedly there are many many ways to do this, I went for the quickest and easiest. Scenario: you want to display a high quality image on your web page, this will take some time to load, and you want to show a spinner while it loads. I will use a div as a placeholder for the spinner and the image. These are made the same size so that when the image has loaded it completely covers the spinner. I used the z-index property to ensure that the image overlayed the spinner. There is no javascript in this one, just CSS.

HTML
Again, a straight forward html page. In the body the div is given the class “loading two”, to call up the spinner in the CSS – this example courtesy of Stu over on cssplay.co.uk (in fact there are three spinners in the CSS I am only using one). The height and width of the div have been set to the height and width of the image. The image is given the id of “test”, I have added a short animation to make the image fade in – this could be improved as I only went from 0 to 1 opacity. The key for the image is the inline style where I have set the position to relative and z-index to 99, a much higher number than that of the spinner (10). This places the image over the spinner. As the page loads, the spinner is active, then as the image comes in it covers the spinner. I have a forced delay on the image through http://deelay.me to help see the spinner.

CSS
I am not going to delve in and describe all of this!

An example of this all working: (view source to get the full page code)

Image Spinner

As I said above there are many and many better ways to do this with CSS, but for me this is a starting point to at least a solution, which no-one else seems too keen to share….

Leave a Reply

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