Unobtrusive CSS Loading Indicator for Images

A few developers are actually aware that the image tag supports background images (as well as practically any other CSS property). Here is a quick and unobtrusive technique for creating loading indicator for images without using JavaScript, that relies on the above feature.

1. Create a loading indicator. You may use

2. Create the markup for your gallery:

<ul class="thumbnails">
<li><img src="Images/Image_01.jpg" alt="Image 1" width="200" height="100" /></li>
<li><img src="Images/Image_02.jpg" alt="Image 2" width="200" height="100" /></li>
<li><img src="Images/Image_03.jpg" alt="Image 3" width="200" height="100" /></li>

3. Create the CSS for the gallery and consider the property in red, where we apply the background image to the image tag:

.thumbnails li
padding: 0;
margin: 0;
list-style: none;
.thumbnails li
float: left;
.thumbnails img
border: solid 2px #5d6f88;
width: 200px;
height: 100px;
background: white url('Images/Loading.gif') no-repeat center;
margin: 0 2px;
.thumbnails img:hover
border-color: black;


To test the loading effect locally, remove the src attribute of the image tags, or simply set an unexisting url. The same effect will appear in online galleries that use large images – the loading image will load faster (as it is some 1-2Kb in size) and will be displayed until the actual image is fully loaded.



Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s