Learn how to create an animated preloader using CSS & jQuery.
| Browser Support | » |     |
|---|---|---|
| Language | » | CSS2, HTML4 & jQuery |
| Difficulty | » | Intermediate |
| Estimated Completion Time | » | 15 minutes |
→ 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.
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 “https://code.jquery.com/jquery-latest.js”;
<head>
<script type="text/javascript"
src="https://code.jquery.com/jquery-latest.js">
</script>
</head>The preloader we are going to learn about is the simplest and best looking …
This preloader is created using only <div> and an image.
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 -->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.
<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>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.
$(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");
});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">.
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">.
<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> 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.
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.
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> 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> 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 .
