Progress bar - update(pourcentage)
Soyez le premier à donner votre avis sur cette source.
Snippet vu 16 376 fois - Téléchargée 29 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
A voir également
- Progress bar - update(pourcentage)
- Progress bar php - Guide
- Progress bar delphi ✓ - Forum - Delphi / Pascal
- Modifiable progresse bar (couleur début&fin) - Codes sources - Visual Basic / VB.NET (Control)
- Progress bar dégradé - Codes sources - Visual Basic / VB.NET (Control)
- Progress bar simple - Codes sources - Visual Basic / VB.NET (Divers)
21 juin 2004 à 17:39
5 juil. 2003 à 17:25
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 ...
1 mai 2003 à 20:38
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
1 mai 2003 à 01:11
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 ?
27 avril 2003 à 05:14
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.