How to Add a CSS Loading Image while your Webpage is still Loading

Add loading image while page loads

There are two things you could use as your loading image: (1) a gif image that you could host on your website, (2) a rotating image generated by CSS3.


We're going to do the latter for this tutorial. While we're using CSS animation, we're also going to be dependent on jquery. If you're already using jquery, yey! You can skip to Step 2. If not, well, just add jquery in your html resources in Step 1.

Add this on your head tag (after <head>):

<script src='http://code.jquery.com/jquery-latest.pack.js'/>

If you're not confident with the source above, use google's API instead:

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js'/>

Add this on your CSS:



Just read the comments on the css to change the background color and the loading image color.

Add this html markup after the body tag (after <body>):


Add this on your body tag (before </body>):

There are 4 ways to do this. If the first one works for you, then good. If not, just select either of the remaining ones.



Note that 100 is the speed in milliseconds, you can change the speed.



Take note that it is in this last option that we're using the css style for class finload. That's its sole purpose. If either options 1 or 2 works for you, then remove .finload css style.

That should look about that simple. Feel free to comment what worked for you.

We love to hear from you


  • SHARES





More from Zirev