Pie loader 2 couleurs de progression, css, html, javascript

Question

J'ai presque fini le temporisateur en utilisant ReactJS. Il devrait ressembler à un chargeur de tarte et j'ai besoin au dernier 30% de progrès pour changer la couleur du vert au jaune.

En tant que modèle pour la minuterie j'ai pris http://jsfiddle.net/Aw5Rf/7/ celui-ci.

<div class="pie" data-percent="22"> 
    <div class="left"> 
     <span></span> 
    </div> 
    <div class="right"> 
     <span></span> 
    </div> 
</div> 

Answer 1

Une possibilité simple serait d'ajouter et de supprimer une classe en fonction des progrès:

http://jsfiddle.net/Aw5Rf/139/

javascript:

$(".pie").each(function() { 
    var percent = $(this).data("percent"), 
     $left = $(this).find(".left span"), 
     $right = $(this).find(".right span"), 
     deg; 

    if(percent >= 70) { 
     this.classList.add("pie-almostComplete"); 
    } else { 
     this.classList.remove("pie-almostComplete"); 
    } 
    ... 
} 

css:

.pie-almostComplete { 
    background-color: rgb(255, 207, 51); 
}