CSS Tip of the Week: Imitation Ajax

No doubt you’ve seen the effect, a small rotating circle spins for a few moments before an image or item loads. It’s nice because it let’s the user know that something is going on. If everything was just blank while an image loaded they might wonder if something has broken! This effect will give your users something to look at while the image is loading so they are reminded that everything is working as intended without the use of Javascript or Ajax.

First, let’s pick a suitable loading image relative to the size of the images we are going to use. I personally love this site for loading gifs. I chose this image for our example:

Here is the image I am going to apply the loading.gif to:

Now that we have our two images, we need to apply the CSS. Apply the following styles to the images that you wish to have a ‘loading’ effect

.example_class {
     background: url('/path/to/loading/animation/') no-repeat center center;
}

Here is what the outputted image would look like:

You may need to reload the page a few times to see the effect…

Thats all there is to it!

This is a very simple technique to add a little flare to your images. You can see this technique on action on the SouthCreative website