Progress bar - update(pourcentage)
Soyez le premier à donner votre avis sur cette source.
Snippet vu 16 179 fois - Téléchargée 27 fois
Contenu du snippet
Voici comment faire une Progress Bar en javascript...
15 janvier 2003
J'aimerai remercier jpb pour m'avoir améliorer le code pour afficher le pourcentage!
J'apprécierai si vous m'avisiez s'il y a des bugs.
bob3000
15 janvier 2003
J'aimerai remercier jpb pour m'avoir améliorer le code pour afficher le pourcentage!
Source / Exemple :
<HTML>
<HEAD>
<span style="font-weight: 700"><font face="Verdana" style="font-size: 15pt">
Chargement...<br>
<br>
</font></span>
<center>
<style>
#barMv{
POSITION:absolute;
LEFT:0;
TOP:0;
BACKGROUND-COLOR:blue;
}
#barBg{
POSITION:absolute;
LEFT:0;
TOP:0;
BACKGROUND-COLOR:white;
BORDER:blue 1px solid;
COLOR:blue;
FONT-WEIGHT:bold;
FONT-FAMILY: "Verdana, Arial";
FONT-SIZE: 13px;
}
#prct{
COLOR:white;
FONT-WEIGHT:bold;
FONT-FAMILY: "Verdana, Arial";
FONT-SIZE: 13px;
}
</style><script language="JavaScript1.2">
function postaction(){
// Un exemple d'action:
// window.location="site"
}
var percent = 0
var clipright=0
var widthIE=0
var widthNS=0
function initializebar(){
if (document.all){
document.all.barMv.style.clip="rect(0 0 auto 0)"
baranchor.style.visibility="visible"
widthIE=barBg.style.pixelWidth
startIE=setInterval("increaseIE()",200)
}
if (document.layers){
widthNS=document.baranchorNS.document.barBgNS.clip.width
document.baranchorNS.document.barMvNS.clip.right=0
document.baranchorNS.visibility="show"
startNS=setInterval("increaseNS()",200)
}
}
function increaseIE(){
percent = percent + 1
if (percent > 100) percent = 100
document.all.barMv.style.clip="rect(0 "+clipright+" auto 0)"
document.all.barBg.innerHTML = percent + "%"
document.all.prct.innerHTML = percent + "%"
if (clipright<widthIE)
clipright = Math.floor(widthIE * percent / 100)
else{
clearInterval(startIE)
postaction()
}
}
function increaseNS(){
percent = percent + 1
if (percent > 100) percent = 100
if (clipright<baranchor.style.width){
document.baranchorNS.document.barMvNS.clip.right=clipright
clipright = Math.floor(widthNS * percent / widthNS)
}
else{
clearInterval(startNS)
postaction()
}
}
</script></HEAD><BODY onload="initializebar();">
</script><script language="JavaScript1.2">
if (document.all){
document.write('<DIV id="baranchor" style="position:relative;width:400px;height:20px;visibility:hidden;">')
document.write('<div id="barBg" align=center style="width:400px;height:20px;z-index:9">0%</div>')
document.write('<div id="barMv" align=center style="width:400px;height:20px;z-index:10">')
document.write('<TABLE cellSpacing=0 cellPadding=0 border=0 width=400 height=20><TBODY>')
document.write('<TR HEIGHT=20><TD Valign=middle ALIGN=center ID=prct>0%</TD></TR>')
document.write('</TBODY></TABLE></DIV></DIV>')
}
</script><ilayer name="baranchorNS" visibility="hide" width=400 height=20><layer name="barBgNS" bgcolor=black width=400 height=20 z-index=10 left=0 top=0></layer>
<layer name="barNS" bgcolor=blue width=400 height=20 z-index=11 left=0 top=0></layer>
</ilayer>
<p dir="ltr"><font face="Verdana" size="2">Veuillez patientez<span lang="fr-ca">...</span></font>
</p>
</BODY>
</HTML>
Conclusion :
J'apprécierai si vous m'avisiez s'il y a des bugs.
bob3000
Commentaires
faudrait alors
- detecter la connec du mec
- faire une approximation du temps de chargement de la page
- par rapport a la taille des documents (a calculer)
- par rapport au temp de compilation , si c'est du php
- synchroniser la barre avec le temps trouver ...
je pourrai changer pour que ca load des images pendant que la barre defile...
le script, yes pas tres utile -> faire attendre le visiteur pour rien ;)
bob3000
Mais bon, ça fonctionne pas vraiment comme une attente de chargement de la page, faut attendre que la barre ait fini d'évoluer, et ce sans prendre en compte le temps de chargement réel.
C'est un peu de la déco non ?
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.