Pie loader 2 进度颜色，css，html，javascript

【问题标题】：Pie loader 2 progress colors, css, html, javascriptPie loader 2 进度颜色，css，html，javascript
【发布时间】：2016-11-19 16:28:22
【问题描述】：

我几乎用 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>

【问题讨论】：

标签： css html reactjs pie-chart css3pie

【解决方案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);
}

【讨论】：