You are here : : Home > Free Resources > CSS Tutorials > CSS & jQuery Preloader |
Free Web Design Resources
Learn how to create an animated preloader using CSS & jQuery.
Browser Support | » | ![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Language | » | CSS2, HTML4 & jQuery | |||
Difficulty | » | Intermediate | |||
Estimated Completion Time | » | 15 minutes |
<head>
tags. 1 2 3 4 5
<head>
<script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
</head>
src
attribute to the script
tag.src
attribute to "http://code.jquery.com/jquery-latest.js";
1 2 3 4 5 6 7
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<div>
and an image.
<div>
having id="preloader"
. <div>
will have a black background that will hide the webpage till the webpage loads completely.<div id="preloader">
we will create another div which will contain the image that we will animate later using jQuery.1 2 3 4 5 6 7 8
<div id="preloader">Page loading... <div><img src="images/loading.jpg" id="preloader_image" ></div> </div> <!-- #preloader -->
<div>
with id="preloader"
covers the whole screen with Black Background Color to hide the Webpage till it loads . 100% width
and 100% height
to the <div id="preloader">
.<div id="preloader">
to the screen using position: fixed;
CSS property.<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.overflow: hidden
for the <div>
inside <div id="preloader">
.id="preloader_image"
must have the position: relative
property defined for it, or the animation will not work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<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>
<div id="preloader">
so that the <div>
inside it will get positioned at the center of the screen vertically.
1 2 3 4 5 6 7 8 9 10 11 12
$(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"); });
$(document).ready(function(){
var screen_ht = $(window).height();
screen_ht
.
var preloader_ht = 5;
<div>
contained inside the Preloader <div id="prelaoder">
.
var padding =(screen_ht/2)-preloader_ht;
<div>
contained inside <div id="preloader">
.<div id="preloader">
.
$("#preloader").css("padding-top",padding+"px");
<div id="preloader">
.
<img id="preloader_image">
moving it to-and-fro horizontally. id="preloader_image"
to the left to 1400 pixels. animation
function starts which moves the image with id="preloader_image"
to the right to its original position.rotate="1"
.rotate="1"
then the animation will repeat till the webpage completes loading.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<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>
$(document).ready(function(){
function anim() {
function anim()
.}
.
$("#preloader_image").animate({left:'-610px'}, 5000,
-610 px
.);
.
function(){ $("#preloader_image"),animate({left:'0px'}, 5000 );
function animate()
.}
.
if (rotate==1){
anim()
function again if the variable rotate
equals to 1.rotate
changes to "0"
.rotate="0"
.hide_preloader()
using onload
event in the <body>
tag .1 2 3 4 5 6 7 8 9 10 11 12
. . </head> <body onload="hide_preloader()"> .. ... // body contents .... .... </body>
hide_preloader()
using onload
event in the <body>
tag .1 2 3 4 5 6 7 8 9 10 11 12
<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>
rotate = 1;
function hide_preloader() {
function hide_preloader()
.onload
event of the <body>
tag.
rotate = 0;
rotate
equal to "0", the Preloader Animation will stop.
$("#preloader").fadeOut(1000);
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.