CSS & jQuery Preloader

Learn how to create an animated preloader using CSS & jQuery.

Please Wait ...

View Demo

Browser Support	»
Language	»	CSS2, HTML4 & jQuery
Difficulty	»	Intermediate
Estimated Completion Time	»	15 minutes

Steps to Create a CSS & jQuery Preloader

→ Download and include jQuery
→ Create the Preloader
→ Style the Preloader using CSS
→ Use jQuery to position the Preloader
→ Apply the Animation Effect using jQuery.
→ Hide the preloader when page loading is finished.

→ Download & Include jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a lightweight "write less, do more" JavaScript library.
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded from › jQuery.com ‹.

We will have to include jQuery inside the <head> tags.
Here's the code:

<head>

   <script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
 
</head>

There's an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding src attribute to the script tag.
Set the value of src attribute to "http://code.jquery.com/jquery-latest.js";

<head>

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</script>
 
</head>

→ Create the Preloader

The preloader we are going to learn about is the simplest and best looking ...
This preloader is created using only <div> and an image.

Here's the Html Code

We will create an outer <div> having id="preloader".
This Preloader <div> will have a black background that will hide the webpage till the webpage loads completely.
Inside this Preloader <div id="preloader"> we will create another div which will contain the image that we will animate later using jQuery.


<div id="preloader">Page loading...

	<div><img src="images/loading.jpg" id="preloader_image" ></div>

</div> <!-- #preloader -->

→ Styling the Preloader using CSS

The <div> with id="preloader" covers the whole screen with Black Background Color to hide the Webpage till it loads .
This is achived by applying 100% width and 100% height to the <div id="preloader">.
We will also fix the <div id="preloader"> to the screen using position: fixed; CSS property.
We will reduce the height and the width of the <div> inside <div id="preloader"> to about 3 px and 400 px respectively, to create an illlusion that the the image animation is only 400 pixels wide and 3 pixels in height.
The image we have used for the animation effect is about 1800 pixels wide.
To show only 400 pixels of the loading animation image we will apply overflow: hidden for the <div> inside <div id="preloader">.
Note: The image having id="preloader_image" must have the position: relative property defined for it, or the animation will not work.

Here's the Stylesheet Code

 <style type="text/css">

#preloader {
	background: #000;
	position:fixed;
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	text-align:center;
	color:#fff;
}
#preloader div {
	width:400px;
	margin:auto;
	height: 3px;
	text-align:center;
	border: 4px solid #111;
	overflow:hidden;
}
#preloader_image {
	position: relative;
	left:0px;
	top:-10px;
}
 
</style>

→ Position the Preloader using jQuery

The Loading animation should appear at the center of the screen or it will look a little wierd.
So we will write jQuery code which will calculate the height to position the Preloader at the center vertically. We will use the calculated height to give top padding to main <div id="preloader"> so that the <div> inside it will get positioned at the center of the screen vertically.

Here's the jQuery Code


$(document).ready(function(){

	// calculate height
	var screen_ht = $(window).height();
	var preloader_ht = 5;
	var padding =(screen_ht/2)-preloader_ht;
	
	$("#preloader").css("padding-top",padding+"px");

});

The Explanation

Line 2 › $(document).ready(function(){
→ For executing code when a page is rendered completely.

Line 5 › var screen_ht = $(window).height();
→ $(window).height(); will get the height of the screen and store it in the variable screen_ht.

Line 6 › var preloader_ht = 5;
→ This is the height of the <div> contained inside the Preloader <div id="prelaoder">.

Line 7 › var padding =(screen_ht/2)-preloader_ht;
→ This statement will calculate the height of screen and divide it by 2.
→ Then it will subtract the height of the <div> contained inside <div id="preloader">.
→ The final result will be used for Top Padding <div id="preloader">.

Line 9 › $("#preloader").css("padding-top",padding+"px");
→ This statement will apply Top Padding to <div id="preloader">.

→ Preloader Animation Effect using jQuery

The jQuery code will animate the <img id="preloader_image"> moving it to-and-fro horizontally.
We will also time the animation in milliseconds.
Here we have timed the animation to "5000 milliseconds" that equals to "5 seconds".
The animate function will move the image with id="preloader_image" to the left to 1400 pixels.
When the image completes moving 1400 pixels to the left another animation function starts which moves the image with id="preloader_image" to the right to its original position.
Then it checks if the value of the variable rotate="1".
If the variable rotate="1" then the animation will repeat till the webpage completes loading.

Here's the jQuery Code

<script type="text/javascript">

$(document).ready(function(){

// loading animation using script 

	function anim() {
		$("#preloader_image").animate({left:'-1400px'}, 5000,
		function(){ $("#preloader_image"),animate({left:'0px'}, 5000 );
			if (rotate==1){
				anim();
			}
		}
		);
	}

	anim();

});

</script>

The Explanation

Line 3 › $(document).ready(function(){
→ For executing code when a page is rendered completely.

Line 7 › function anim() {
→ This will create a new function anim().
→ This function starts from line 7 and ends at line 15 with }.

Line 8 › $("#preloader_image").animate({left:'-610px'}, 5000,
→ This statement will animate the image by sliding it horizontally left to -610 px.
→ 5000 is the speed of the animation in milliseconds. (5000 milliseconds = 5 seconds)
→ This function starts at line 8 and ends at line 14 with );.

Line 9 › function(){ $("#preloader_image"),animate({left:'0px'}, 5000 );
→ This is the callback function of the function animate().
→ As this is the callback function it will run only after the code in line 8 is executed completely.
→ This function starts at line 9 and ends at line 13 with }.

Line 10 › if (rotate==1){
→ This is the conditional statement inside the callback function at line 9.
→ This code will run the anim() function again if the variable rotate equals to 1.
→ When the page loads the value of variable rotate changes to "0".
→ The Preloading animation will stop when rotate="0".
→ This function starts at line no 10 and ends at line no 12.

→ Hiding the Preloader on Page Load

The Preloader need to be visible till the page loading is completed.
To achive this we will have to create a function that gets called when the page loading is completed.

Here's the Html Code

We will call a function hide_preloader() using onload event in the <body> tag .
This will be called only when the webpage loads completely.

.
.
</head>

<body onload="hide_preloader()">
..
...
  // body contents .... 
....
</body>

jQuery code for hiding Preloader

We will call a function hide_preloader() using onload event in the <body> tag .
This will be called only when the webpage loads completely.

<script type="text/javascript">

rotate = 1;

function hide_preloader() {
	// To stop the preloader 
	rotate = 0; 
	// To apply Fade Out Effect to the Preloader 
	$("#preloader").fadeOut(1000);
	}

</script>

The Explanation

Line 3 › rotate = 1;
→ This will set the value of the variable equal to "1".
→ This will let the Preloading Animation display on the screen.

Line 5 › function hide_preloader() {
→ This will create the function hide_preloader() .
→ This function will run on the onload event of the <body> tag.

Line 7 › rotate = 0;
→ This statement will set the value of the varible equal to "0".
→ By setting the value of the variable rotate equal to "0", the Preloader Animation will stop.

Line 9 › $("#preloader").fadeOut(1000);
→ This statement will apply the Fadeout Effect to the Preloader .

Click here to Download the Demo

This resource is part of the Entheos Free Resources section. These resources & tutorials cover Corel Draw Tutorials, CSS Tutorials, Flash Tutorials, Fireworks Tutorials and Effects, Dreamweaver Tutorials, Design Ideas & Inspiration, Photoshop Effects & Web Design Tutorials.

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.