Simple jQuery Preloader for Websites

Last modified on by Karthikeyan K

Now a days every websites are powered by jQuery Preloader. It will add interactivity to a webpage with some sort of animations.  Today I am going to tell how to create a simple jQuery Preloader with 2 lines of jQuery code & few lines of CSS code. We want our user to see something is happening in the background which clicking on any urls in the webpage. This simple JQuery Preloader trick will help them to wait for few seconds in the page before taking any hard decision to move out from our website.

Check my another article to show busy loader gif for ajax related content using jQuery – Click here

jQuery Preloader for websites

jQuery Preloader

Contents

jQuery Code to Create Preloader

// makes sure the whole site is loaded
jQuery(window).load(function() {
// will first fade out the loading animation
jQuery("#status").fadeOut();
// will fade out the whole DIV that covers the website.
jQuery("#preloader").delay(1000).fadeOut("slow");
})


Here I have used jQuery window onload function – it waits for the assets in the page to be completely loaded

CSS Code

#preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fefefe;
z-index: 99;
height: 100%;
}

#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
}

 

checkout my latest post on Top 20 most used jquery snippets in 2019

HTML Usage

<div id="preloader">
<div id="status">&nbsp;</div>
</div>

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!

You May Also Like

17 Responses

  1. Cornélio José Wiedemann says:

    you are the best , web-designer man
    i love your codes
    hehe
    you are the man

    tks and 1 hug

  2. mateusz says:

    hey i’ve subscribed, but I cant download this – says im not in database

  3. Diego Incerti says:

    thank you! you solved all my problems.

  4. Giovanni says:

    Nice plugin, but, if I want to delai the animation for 2 seconds for example???

  5. Apu Patel says:

    Great!!And now if you wanted to use a css animation instead of a gif? Is it possible?

  6. Xakni Domz says:

    Hi Karthikeyan K,

    Thanks for the tutorial. Im so glad I was able to add it on my Weebly site and works perfectly. I also created a tutorial on how to insert it on Weebly Template with you as the code source of course. Keep up the good work. Anyway my tutorial for Weebly is: http://www.myweeblytricks.com/2014/03/weebly-tricks-33-web-page-preloader.html

  7. pope says:

    THank u man

  8. blender says:

    hey i have subscribed, but I cant download this – says that email does not exist in database.
    help me out .

  9. qwerty says:

    Email does not exist in our database. Please use below form to subscribe

    Email does not exist in our database. Please use below form to subscribe

    Email does not exist in our database. Please use below form to subscribe

    this what i’m getting

  10. amin khoshzahmat says:

    simple and great!

  11. muthu says:

    nice preloader tutorial

  12. ultramac101 says:

    Hi
    Thanks for this tutorial.
    But you should update your jquery code.
    The .load() fonction is deprecated since the 1.8 version.
    The correct function is .on()
    So replace :

    jQuery(window).load(function() {

    By :
    jQuery(window).on(‘load’,function() {

  13. Quique Flowers says:

    Thank you very much for this tutorial…

Leave a Reply

Your email address will not be published. Required fields are marked *