Progress bar - update(pourcentage)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 144 fois - Téléchargée 27 fois

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

Ajouter un commentaire

Commentaires

Signaler
Syruis
Messages postés
184
Date d'inscription
mardi 8 juin 2004
Statut
Membre
Dernière intervention
28 avril 2009
 -
le meillieur moyen de faire une progress bar c'est pas de faire ainsi mais d'utiliser les sevlet, ya moyen de demander au serveur ou il en ai de l'upload alors que détecter tout ces critères derai trop aproximatif...
Signaler
Mumuri
Messages postés
321
Date d'inscription
mercredi 9 octobre 2002
Statut
Membre
Dernière intervention
6 avril 2008
 -
C'est standard, mais ca peut toujours servir, ny'aurai t'il pas moyen d'afficher cette barre pour un préchargement de page

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 ...
Signaler
bob3000
Messages postés
406
Date d'inscription
mardi 7 mai 2002
Statut
Membre
Dernière intervention
2 octobre 2004
 -
cest pas un peu de la deco, cest 100% de deco!!!!
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
Signaler
cs_siddharta
Messages postés
3
Date d'inscription
mercredi 12 février 2003
Statut
Membre
Dernière intervention
16 février 2004
 -
Ben si : ça marche, c'est cool. (IE5)
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 ?
Signaler
bob3000
Messages postés
406
Date d'inscription
mardi 7 mai 2002
Statut
Membre
Dernière intervention
2 octobre 2004
 -
aucun commentaire?
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)