Unobtrusive CSS Loading Indicator for Images

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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.

Categories and Tags

© 2006 - 2023 Martin Ivanov