Today we will see easiest way of doing this with two lines of jQuery. Yeah just two lines it’s the quick way of displaying page once all the elements on the page have been loaded completely. Also we will see some really cool animated icons that you can show while the page is loading with custom text message.
Let’s see how easily you can add it to any webpage. Below is our simple jQuery code which will display loading icons and will fade them out once all the page elements have been loaded.
load function will ensure it will be executed when all page elements have been loaded.
We also have little CSS code just to keep loading images centered and add some content (Bg image). Below is our CSS code:
margin: -100px 0 0 -100px;
background: url(http://infotuts.com/<span id="IL_AD4" class="IL_AD">demo</span>/website-preloader-jquery/bg.jpg);
<p style="text-align: justify;">
It was a quick tutorial to show how powerful jQuery is. Just few lines of code and it can solve a problem of bad loading of webpages with user friendly solution. We are coming with some really good scripts that you guys will surely love. I would appreciate if you give us a little favor by liking our FB page and follow me on Google Plus. Also share this simple post with your friends and followers.