Progress bar - update(pourcentage)

Commenter

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!

Source / Exemple : 


<HTML>
<HEAD>
<span style="font-weight: 700"><font face="Verdana" style="font-size: 15pt">
Chargement...<br>
<br>
</font></span>&nbsp;
<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

S'inscrire maintenant

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.

Du même auteur (bob3000)