Voici un exemple de ce que cela peux donner, je vous conseils de ne pas utiliser ce script si vous avez utilisé des "CSS Reset". Et n'utilisez pas une tag "DIV" général en "CSS" appliquant la position "relative" à tous

Voici le code javascript de ce Preloader.

 
 
// Vous pouvez changer la vitesse (speed) (1 == tres rapide)
// Vous pouvez changer la qualité de la transition (1 == best)
// Plus la transition est de qualité, plus la rapidité ralenti et doit être augmenté
var speed = 10;
var transition = 10;
 
// Dimensions du preloader en GIF animé
var GIFpreloadLargeur = 20;
var GIFpreloadHauteur = 20;
 
var timer= 0;
var opaciT = 100; 
 
function opacity()
{
    opaciT = opaciT - transition;
 
    var object = document.getElementById("preloader").style;
    object.opacity = (opaciT / 100);
    object.MozOpacity = (opaciT / 100);
    object.KhtmlOpacity = (opaciT / 100);
    object.filter = "alpha(opacity=" + opaciT + ")"; 
 
	if (opaciT <= 0)
	{
		document.getElementById("preloader").style.visibility="hidden";
		clearInterval(timer);
	}
 
}
 
function preload()
{
	if (document.getElementById)
	{
		document.getElementById("preloadIMG").style.visibility="hidden";
		timer = setInterval("opacity()",speed);
	}
 
	else
	{
	   	if (document.layers)
		{
			document.preloadIMG.visibility = "hidden";
			timer = setInterval("opacity()",speed);
	    }
	        else
		{
			document.all.preloadIMG.style.visibility = "hidden";
			timer = setInterval("opacity()",speed);
		}
	}
}
 
// GÉNÉRER LE CSS POUR LE PRELOADER
var myCSS;
myCSS = "
<style type=\"text/css\">";
 
myCSS += "html, body { height:auto; margin:0px; padding:0px;}";
 
myCSS += "#preloader {";
myCSS += "position:fixed;";
myCSS += "background-color:white;";
myCSS += "width:100%;";
myCSS += "height:100%; ";
myCSS += "display:block;";
myCSS += "z-index:100000;";
myCSS += "}";
 
myCSS += "#preloadIMG {";
myCSS += "position:absolute;";
myCSS += "left:50%;";
myCSS += "width:" + GIFpreloadLargeur + "px;";
myCSS += "height:" + GIFpreloadHauteur + "px;";
myCSS += "margin-left:-" + (GIFpreloadLargeur / 2) + "px;";
myCSS += "top:150px;";
myCSS += "}";
 
myCSS += "</style>
 
";
 
// ÉCRITURE DES CSS
window.document.write(myCSS);
 
// ÉXÉCUTION
window.onload = function() { preload(); }
 

Maintenant, veuillez insérer ce code juste après la tag BODY. Prenez notes que l"image du preload doit être mise sur votre serveur et que la source doit être changé tout dépendant de l"edroit ou se trouve votre image.

 
<div id="preloader">
<div id="preloadIMG"><img src="loading.gif" alt="" /></div>
</div>
 

Voilà, maintenant vous possédez un preloader très chic pour vos pages web lourdes.