mhmd mhmd - 5 months ago 13
HTML Question

show a website loading image using only CSS (not Javascript or jQuery)

How can i put a logo and a loading image when a user open the website

when the user open the website the logo appear with a loading image than the home page appear after a certain moment like this website

and it possible to do that without using javascript or jquery only in css?


Yes, you can animate with pure CSS using the animate property.

For example, if you would want #img1 to show first, and #img2 to show after, you can set an animation-delay on your second image and make that equal to the animation-duration of your first:

#img1 {
    animation-duration: 2s;
#img2 {
    animation-delay: 2s;

Then in your animation you can animate e.g. the opacity property to simulate a fade-in effect.

More on CSS Animations here.

I created a fiddle doing what you want. For support in more browsers, please advice