This tutorial is about how to create a simple, smooth loading jQuery preloader page loader using JavaScript.

It isn’t good when the content on a webpage looks messy before it completely gets loaded. Webpages have large images, heavy JavaScript, CSS files that take time to load.

You can use this jQuery pre-loader to add a smooth experience to your website users. This page loader with JavaScript will show overly with a gif animated loader until your page loads completely.

Step 01 – Add below HTML part just after the opening body tag <body>

This is the HTML part of the JavaScript page loader to be placed just after the opening body tag of your web page.

<div id="preloader"> 
  <div id="status">
  </div> 
</div>

Step 02 – Add this code to your website CSS styling.

This CSS code will cover the webpage with a white screen. Animated gif preloader will appear in the center of the page. Make sure to replace the loading background image URL on line 17. It’ll be fascinating if it’s an animated gif image.

#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#FFF; /* change if the mask should have another color then white */
	z-index:99999; /* makes sure it stays on top */
}

#status {
	width:100px;
	height:100px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url("../imgs/loader.gif");
	z-index:9999; /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
    background-size: cover;
	margin:-50px 0 0 -50px; /* is width and height divided by two */
}

Note: GIF images usually are large files. Make sure to use a very light weighted animated GIF.

Step 03 – Place this JavaScript code after the jquery

This page loader JavaScript part should be placed just before the closing body tag of your web page. You can customize the timing on the below script.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script	type="text/javascript">
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(50).fadeOut(100); // will fade out the white DIV that covers the website.
$('body').delay(50).css({'overflow':'visible'});
})
</script>

Note: I have used CSS & JavaScript comments to describe what each line does. You can remove those after placing all the part of this jQuery page loader on your web page.

This jquery snippet code will display a white background with your loading image (gif) and faded out smoothly after your web page gets fully loaded.

One more thing, If you found this post is useful, don’t forget to share this on your favorite social media platform and support. Enjoy!

Author

Hi! I’m Dimuthu Freelance Web Designer, Developer, Creative Graphic Designer, Digital Marketer & Successful Blogger. Hire me! if you need any support.

6 Comments

  1. Hyundai tucson 2020 Reply

    I’m not that much of a internet reader to be honest but your blogs really nice,
    keep it up! I’ll go ahead and bookmark your website to come back down the road.
    Cheers

  2. family law montgomery county pa Reply

    I really like your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for
    you? Plz answer back as I’m looking to create my own blog and would like to find out where u got this from.
    thank you

  3. My brother suggested I might like this blog. He used to be
    entirely right. This put up truly made my day. You can not imagine just how so much time I had
    spent for this information! Thank you!

  4. Hey this is kind of of off topic but I was wondering if blogs
    use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding expertise so I
    wanted to get guidance from someone with experience.

    Any help would be enormously appreciated!

  5. website archive Reply

    Hello! This is my first visit to your blog! We are a collection of volunteers
    and starting a new initiative in a community in the same niche.
    Your blog provided us useful information to work on. You
    have done a marvellous job!

  6. eebest8 back Reply

    “I really enjoy the blog post.Really thank you! Awesome.”

Write A Comment

Pin It