Bonjour,
J'aimerai créer une barre de progression qui soit programmable, c'est à dire que celle-ci défile pour un temps donné (exemple : pour une durée de 15 minutes). Ainsi dès que je l'activerai elle défilerai pendant x minutes et actualiser la page n'aura aucun impact sur sa progression (pas de retour à 0).
Difficile à expliquer mais pour vous donner une idée je voudrais une barre comme la barre timelime de cette page http://www.tf1.fr/live/# ou http://www.france4.fr/. Toutes mes recherches m'ont amené sur des scripts pour des barres d'upload ou avec un retour a 0 à chaque actualisation.
J'avais trouvé ce code intéressant sur le web, mais il s'actualise à chaque changement de page ou rafraichissement et je n'arrive pas à le modifier pour changer le temps de progression.
Merci de votre aide
J'aimerai créer une barre de progression qui soit programmable, c'est à dire que celle-ci défile pour un temps donné (exemple : pour une durée de 15 minutes). Ainsi dès que je l'activerai elle défilerai pendant x minutes et actualiser la page n'aura aucun impact sur sa progression (pas de retour à 0).
Difficile à expliquer mais pour vous donner une idée je voudrais une barre comme la barre timelime de cette page http://www.tf1.fr/live/# ou http://www.france4.fr/. Toutes mes recherches m'ont amené sur des scripts pour des barres d'upload ou avec un retour a 0 à chaque actualisation.
J'avais trouvé ce code intéressant sur le web, mais il s'actualise à chaque changement de page ou rafraichissement et je n'arrive pas à le modifier pour changer le temps de progression.
<html>
<head>
<title>Barre de progression</title>
<style type="text/css">
body{
margin-left: auto;
margin-right: auto;
text-align:center;
}
.cadre{
margin-top: 250px;
margin-left: auto;
margin-right: auto;
text-align:center;
height: 50px;
width: 900px;
border: 1px solid black;
}
#barre{
height: 50px;
width: 0px;
background-color: red;
}
.texte{
text-align: center;
font-size: 26px;
font-weight: bold;
}
</style>
<script type="text/javascript">
var i=100;
function progression(timer){
if(i<=parseInt(document.getElementById('cadre').clientWidth)){
var compteur=100;
document.getElementById("barre").style.width=i+"px";
while(compteur<=100)
compteur++;
if(i>40)
document.getElementById("pourcentage").innerHTML=parseInt(i/(parseInt(document.getElementById('cadre').clientWidth)/100))+"%";
setTimeout("progression();", timer);
i++;
}
else
alert("Texte");
}
</script>
</head>
<body onload="progression()">
<noscript class="cadre">Vous devez activer le Javascript pour pouvoir visiter ce site !</noscript>
<div class="cadre" id="cadre">
<div id="barre">
<span class="texte" id="pourcentage"></span>
</div>
<br /><br />
<div class="texte">Chargement en cours ...</div>
</div>
</body>
</html>
Merci de votre aide