animate plusieurs progressbar html5

Par Vincerolf, il y a 11 ans

Javascript

Salutations,

Voila, je veux afficher un genre de résultats d'élection. Pour cela j'utilise une progressbar pour chaque resultat, je recupère la valeur depuis mysql et l'implante dans la valeur max de progress.

//$p correspond à la valeur retourné de bsd
<div class="progressdiv">
    <p>Score...0%</p>
    <progress class="progressbarre" value="0" min="0" max="<?php echo $p ?>"></progress> 
</div>

Apres j'aimerai savoir comment gérer plusieurs progression en même temps sachant que si j'en ai 2,3 ou 100.
J'ai tenté quelque chose comme ça mais ça ne fonctionne pas 

$(".progressbarre").each(function(){

        progressbar = $(this);
        max = progressbar.attr('max');
        time = (300/max)*5, 
        value = progressbar.val(); 

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

            progressbar.prev().html(value + '%'); 

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

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

});

1 réponse

Vincerolf, il y a 11 ans

Voila comment j'ai fait avec velocity éé, j'ai laissé tomber <progress> et opté pour de bonnes vielles div : Ce qui est interessant c'est
l'option Progress de Vélocity.

///////////////////////////////css///////////////////
.sup_progressbarre{
    width: 135px;
    height: 15px;
    border: 1px solid #666666;
    border-radius: 5px;

}
.progressbarre{
    display: none;
    height: 13px;
    border-radius: 5px;
    background-color: rgba(83,255,23,.8);
}
.progressdiv p{
    font-family: bold;
    color: #666666;
    height: 20px;
}
////////////////////////////////html///////////////////
// l'idée c'est d'avoir plusieurs structures comme celle la
<div class="progressdiv" data-res="<?php echo $p ?>">
    <p></p>
    <div class="sup_progressbarre">
    <div class="progressbarre"></div> 
    </div>
</div>
////////////////////////////////js/jquery////////////////////
$(".progressbarre").each(function(){

    var progressbar = $(this);

    var val = progressbar.parent().parent().data('res'); 
    var val = val+33;
    progressbar.velocity(
        {
            width:val
        },{
            easing: "swing",
            duration:10000,
            display:'block',
            progress:function(elements,percentComplete,timeRemaining, timeStart){
                progressbar.parent().prev().html('Score...'+(Math.round(percentComplete*(val-33)))+'%');    

            },
        }
    );
});