csshtmlreactjspie-chartcss3pie

Pie loader 2 progress colors, css, html, javascript


I almost finished timeout timer using ReactJS. It should look like a pie loader and I need at the last 30% of progress to change color from green to yellow.

As a template for timer I took http://jsfiddle.net/Aw5Rf/7/ this one.

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

Solution

  • One simple possibility would be to add and remove a class based on the progress:

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