Etape 1 : Ajouter dans le <HEAD> :
<script> <!-- // Copyright Peter Gehrig et Urs Dudli at www.24fun.com // If you add this script to a script-archive // you have to add a link to www.24fun.com on the page // La largeur de la barre en pixels. var loadbar_width=200 // La hauteur de la barre en pixels. var loadbar_height=18 // La position horizntale de la barre. var loadbar_left=40 // La position verticale de la barre. var loadbar_top=50 // Le temps du décompte (en secondes). var countdown_time=10 // L'url de destination après le décompte var redirection_url="loadbar-2.html" // //////////////////////////////////////////////////// countdown_time=countdown_time*1000 var pause=20 var i_loop=0 var dblwidth=2*loadbar_width var clipleft=loadbar_width var clipright=dblwidth var cliptop=0 var clipbottom=loadbar_height var getmilli_start var getmilli_loop var getmilli_total var waydone function initiate() { var time=new Date() getmilli_start=time.getTime() if (document.all) { document.all.loadbar.style.posLeft=loadbar_left-loadbar_width document.all.loadbar.style.posTop=loadbar_top document.all.loadbar.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" moveloadbar() } else if (document.layers) { document.loadbar.left=loadbar_left-loadbar_width document.loadbar.clip.left=loadbar_width document.loadbar.top=loadbar_top document.loadbar.clip.right=dblwidth document.loadbar.clip.top=0 document.loadbar.clip.bottom=loadbar_height moveloadbar() } else { document.location.href=redirection_url } } function moveloadbar() { var time=new Date() var getmilli_loop=time.getTime() getmilli_total=getmilli_loop-getmilli_start waydone=Math.floor(loadbar_width/countdown_time*getmilli_total) if (clipleft>=0) { if (document.all) { document.all.loadbar.style.posLeft=loadbar_left-loadbar_width+waydone clipleft=loadbar_width-waydone clipright=-waydone+2*loadbar_width document.all.loadbar.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" } if (document.layers) { clipleft=loadbar_width-waydone document.loadbar.left=loadbar_left-loadbar_width+waydone document.loadbar.clip.left=loadbar_width-waydone document.loadbar.clip.right=-waydone+2*loadbar_width document.loadbar.clip.top=0 document.loadbar.clip.bottom=loadbar_height } var timer=setTimeout("moveloadbar()",pause) } else { clearTimeout(timer) document.location.href=redirection_url } } // --> </script>
On doit configurer quelques variables au début du script.
Etape 2 : Ajouter dans la balise <BODY> :
<body onLoad="initiate()">
Etape 3 : Ajouter juste après la balise <BODY> :
<div id="loadbar" style="position:absolute;top:-2000px"> <script> document.write("<img src='loadbar.gif' width='"+dblwidth+"' height='"+loadbar_height+"'>") </script> </div>
Etape 4: Enregister l'image suivante dans le répertoire du script.