Anton Artemev Anton Artemev - 13 days ago 6
CSS Question

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.

The result of how it should look here: https://www.figma.com/file/KWt0yYSe5AMgC0EGOI4taM0x/Time-loader

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>

Answer

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