Add a download icon to large CSS images.

Let's imagine that you have big pictures on your page, and you want the user to know that they are loading. Using JavaScript, you can embed an animated icon to all images that are not yet uploaded, but we can offer you a simpler and cleaner way.

Step 1: Find the animated icon

There are many sites where you can create your own image for the bootloader. Our favorite this one . The main thing is not to choose an icon that will weigh a lot. Here we have generated this:


')

Step 2: Add CSS Rules

There's quite a bit of code here, and you can just copy it. Just do not forget to change "youricon.gif" to your picture.

.load { background: url('images/youricon.gif') no-repeat center; } 

Step 3: Apply the code

There are several ways, but the best is to wrap more pictures in a load div . You also need to set the width and height of the image.

 <div class="load" style="width:200px;height:200px"> <img src="large.jpg" alt="alternate text" /></div> 

You can see the result here .

As Lim Chee Aun tells us, you can not wrap the image in a div , but do it like this:

 <img src="large.jpg" alt="alternate text" class="load" style="width:200px;height:200px" /> 

But the reason why we didn’t mention this method initially is that if the picture was not uploaded, then it can spoil the look of the site (it seems that the authors of the article are sitting under IE - approx. Transl.) . If you are absolutely sure that you will not have any problems with downloading, you are in the drum, that the bootloader icon will not be in the center and you have a lot of pictures, then you can also arrange such a solution:

 img { background: url('images/youricon.gif') no-repeat center; } 

But be careful - if you have a white background on the bootloader, then it can get on a black background, for example, in the side column (it seems that icons with a transparent background are already non-kosher - approx. Transl.) . Therefore, it is better to do this:

 #yourcontentdiv img { background: url('images/youricon.gif') no-repeat center; } 

See the final result!