Animer une barre de progression avec JQuery


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:

Animer une barre de progression avec JQuery (1/2)

Animer une barre de progression avec JQuery (2/2)

<!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

Image

of