Avec JQuery on peut rapidement animer une barre de progression. Pour cela, rappelons tout d'abord qu'avec HTML5 on peut facilement créer une barre de progression comme ceci:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><progress max="100" value="60"><strong>Téléchargement: 60%</strong></progress></body></html>
Il suffit alors d'animer celle-ci en passant par JQuery comme dans cet exemple:
<!DOCTYPE html><html><head><script src="js/jquery-1.11.1.js" type="text/javascript"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script>$(document).ready(function() {var MaBarreProgression = $('#MaBarreProgression'),max = MaBarreProgression.attr('max'),time = 100,value = MaBarreProgression.val();var Telechargement = function() {value += 1;addValue = MaBarreProgression.val(value);$('.progress-value').html('Téléchargement '+ value + '%');if (value == max) {clearInterval(animation);$('.progress-value').html('Téléchargement Terminé !');}};var animation = setInterval(function() {Telechargement();}, time);});</script></head><body><progress id="MaBarreProgression" value="0" max="100"></progress><br><span class="progress-value">Téléchargement 0%</span></body></html>
Recherches associées
| Liens | Site |
|---|---|
| JQuery | JQuery |
| Creating & Styling Progress Bar With HTML5 | hongkiat |
| Progress bar start & stop - JSFiddle | jsfiddle |
| Barre de progression | scriptol |
| blueimp jQuery-File-Upload script - reset progress bar | stackoverflow |
| Stop jQuery setInterval | stackoverflow |
