餡餅加載器2進步的顏色，CSS，html，javascript

Question

我幾乎完成使用ReactJS超時計時器。它應該看起來像一個餅圖裝載機，我需要在最後的30％進展中將顏色從綠色變爲黃色。

作爲定時器的模板我拿了http://jsfiddle.net/Aw5Rf/7/這一個。

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

Answer 1

一個簡單的可能性是添加和刪除基於進度的類：

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); 
}