Rafraichissement progressbar

Résolu/Fermé

none61 Messages postés 82 Date d'inscription mercredi 23 avril 2014 Statut Membre Dernière intervention 14 avril 2020 - 7 oct. 2016 à 18:31
none61 Messages postés 82 Date d'inscription mercredi 23 avril 2014 Statut Membre Dernière intervention 14 avril 2020 - 9 oct. 2016 à 14:34

Bonjour,

J'éspère poster dans la bonne section...

En effet je voudrais créer une page html qui affiche just une bar de progression (Le but pour moi étant de comprendre comment cela fonctionne...

- J'ai donc créé ma page avec ce code :

<div id="progress">
<p>progress bar <strong>0%</strong></p>
<progress value="5" min="0" max="100">0%</progress>
</div>

- j'ai ensuite rajouté du code css pour la mise en forme:
<style>
progress{
width: 300px;
margin: auto;
}
progress{
display: inline-block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
height: 20px;
padding: 3px 3px 2px 3px;
background: #333;
background: -webkit-linear-gradient(#2d2d2d,#444);
background: -moz-linear-gradient(#2d2d2d,#444);
background: -o-linear-gradient(#2d2d2d,#444);
background: linear-gradient(#2d2d2d,#444);
border: 1px solid rgba(0,0,0,.5);
border-radius: 15px;
box-shadow: 0 1px 0 rgba(255,255,255,.2);
}
</style>

- En changeant la valeur "5" par un autre chiffre compris entre 0 et 100, et en ractualisant ma page, la progressebar change bien d'état.

- Ma question est: comment faire pour que ma progressera change d'état sans avoir besoin de réactualiser ma page a chaque fois??

J'ai essayé avec des scripts javascript trouvés sur internet mais sans succès...

Merci d'avance pour votre aide.

A voir également:

Rafraichissement progressbar
Impossible de changer la fréquence de rafraîchissement - Forum Carte graphique
Bloquer rafraîchissement page chrome - Forum Réseaux sociaux
Shaw direct rafraîchissement - Guide
RAFRAICHISSEMENT MONITEUR - Forum Ecran
Taux de rafraîchissement ✓ - Forum Matériel & Système

2 réponses

Réponse 1 / 2

Utilisateur anonyme
8 oct. 2016 à 17:15

Tu n'as pas cherché longtemps alors, car j'ai trouvé en 2 minutes ce que tu veux faire:

https://www.hongkiat.com/blog/html5-progress-bar/

Si on l'adapte pour toi en VanillaJS ça donne ceci:

Le CSS :

#progressvalue {
	font-weight: bold;
}
#progressbar {
	width: 300px;
	margin: auto;
}
#progressbar {
	display: inline-block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 300px;
	height: 20px;
	padding: 3px 3px 2px 3px;
	background: #333;
	background: -webkit-linear-gradient(#2d2d2d,#444);
	background: -moz-linear-gradient(#2d2d2d,#444);
	background: -o-linear-gradient(#2d2d2d,#444);
	background: linear-gradient(#2d2d2d,#444);
	border: 1px solid rgba(0,0,0,.5);
	border-radius: 15px;
	box-shadow: 0 1px 0 rgba(255,255,255,.2);
}

L'HTML :

<div id="progress">
	<p>progress bar <span id="progressvalue">0%</span></p>
	<progress id="progressbar" value="0" min="0" max="100"></progress>
</div>

Le JS :

var progressbar = document.getElementById('progressbar'),
progressvalue = document.getElementById('progressvalue'),
max = progressbar.max,
time = (1000/max)*5,  
value = progressbar.value;

var loading = function() {
	value += 1;
	addValue = progressbar.value = value;

	progressvalue.innerText = value + '%';

	if (value == max) {
		clearInterval(animate);                
	}
};

var animate = setInterval(function() {
	loading();
}, time);

none61 Messages postés 82 Date d'inscription mercredi 23 avril 2014 Statut Membre Dernière intervention 14 avril 2020
Modifié par none61 le 8/10/2016 à 18:11

Bonjour,

Merci pour ta réponse.

J'ai pourtant cherché bien longtemps avant de venir poster le forum mais bon..bref :-)

J'ai essayé ce que tu m'a posté

j'ai just ajouté <style> </style> autour du css et <script type="text/javascript"></script> autour du code java script car dans un premier temp je laisse ce dernier dans la meme page que l'html.

J'ai sans doute dû mal faire car lorsque je réactualise la page, la barre monte toute seul jusqu'a 100. Hors je veux just que la barre m'affiche la valeur de value au fur et a mesure que je la modifie...

Réponse 2 / 2

Utilisateur anonyme
8 oct. 2016 à 21:21

Et tu la modifie comment la valeur, tu te bases sur quoi pour avoir le pourcentage ?

--

none61 Messages postés 82 Date d'inscription mercredi 23 avril 2014 Statut Membre Dernière intervention 14 avril 2020
9 oct. 2016 à 10:22

je t'explique mon installation pour que tu ai une vision plus global... ;-)

Je possède une tablette mural sur laquelle j'ai l'application "imperihome"
je possède un Pi avec un serveur apache.
et un Nas synology.

Parfois je télécharge des datas de chez un ami avec le Pi directement sur le Nas (Tout es en VPN avec montage de dossier distants.

Lors du téléchargement des Datas, j'aurais voulu que ma tablette imperihome pointe sur une page http hébergée sur mon Pi avec une barre de progression pour m'indiquer l'état l'avancement.

Pour cela je pensais faire un script bash qui me calculerai le pourcentage d'avancement et irai modifier la valeur de la "progressbar" dans le html .

C'est pourquoi je voulais savoir comment avoir une vision dynamique de la "progressbar" sur ma page http sans avoir besoin de recharger la page en entier car par la suite je ferai peux être évoluer mon system avec d'autre informations a afficher...

J'ai lu a droite et gauche qu'il fallait passer par du ajax mais sans explications concrète .

Merci pour ton aide

none61 Messages postés 82 Date d'inscription mercredi 23 avril 2014 Statut Membre Dernière intervention 14 avril 2020
9 oct. 2016 à 11:48

J'ai avancé un peu de mon coté.

Il s'avère qu'en faite c'est l'actualisation d'une div que je souhaite faire.

Pour ce faire j'ai trouvé plusieurs tutos qui me renvoient a peu prés les même réponses a savoir:

avoir une page html contenant ceci:

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_donnees').load('ma page.php').fadeIn("slow");
}, 10000); // rafraichis toutes les 10000 millisecondes

</script>

<body>
<div id="load_donnees"></div>
</body>

et avoir une page .php qui contient le contenu a actualiser qui dans mon cas est :

<div id="div1">
<p>progress bar <span id="progressvalue">0%</span></p>
<progress id="progressbar" value="0" min="0" max="100"></progress>
</div>

Visiblement le code java dans la page html sert a aller chercher le contenu de la page php et a le mettre dans la div contenant l'id load_donnees

Donc après normalement en modifiant value=0 dans la page php la page html devrait se trouver actualiser.

Cependant pour le moment avec ce system,je n'arrive pas encore a afficher la "progressbar" dans la page html

je continu mes investigations ;-)

none61 Messages postés 82 Date d'inscription mercredi 23 avril 2014 Statut Membre Dernière intervention 14 avril 2020
9 oct. 2016 à 14:34

Je m'auto-répond car j'ai trouvé la solution ;-)

voici le code javascript que j'ai utilisé pour que ça fonctionne:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#bloc').load('http://MON IP/progressbar.php').fadeIn("slow");
}, 100); // refresh every 100 milliseconds

</script>

Merci quand même

Discussions similaires

Modifier la fréquence de rafraîchissement du moniteur

rafraichissement écran "bloqué" a 60hz

Impossible de changer le taux de rafraichissement d'un écran branché en hdmi

je ne sais pas a quoi sert le Tx rafraichissement

Problème taux de rafraîchissement

Utilisateur anonyme - 8 nov. 2021 à 23:03
Utilisateur anonyme - 10 nov. 2021 à 19:45

Discussions similaires

Newsletters