色彩变化的径向动画

Question

So, I have this "widget" that is like a radial progress bar. I have it working currently pretty well. It animates when the value changes which is great, but I would like to use a traffic light colour scheme, so that the closer it gets to 100% the redder it gets, the closer to 0% the greener it gets and 50% is yellow.

The HTML I have for this looks a bit like this:

        <div class="radial-progress" data-progress="{{ controller.progress }}">
        <div class="circle">
            <div class="mask full">
                <div class="fill"></div>
            </div>
            <div class="mask half">
                <div class="fill"></div>
                <div class="fill fix"></div>
            </div>
            <div class="shadow"></div>
        </div>
        <div class="inset">
            <div class="percentage">
                <span id="progress">0</span>%
            </div>
        </div>
    </div>

    <div class="footer">
        <div>
            <div>
                <strong>Credit limit: </strong><span class="pull-right">{{
                    controller.data.currencyCharacter }}{{ controller.data.creditLimit |
                    number: 2}}</span>
            </div>
            <div>
                <strong>Available credit: </strong><span class="pull-right"
                    ng-class="{'lead text-danger': controller.data.availableCredit < 0 }">{{
                    controller.data.currencyCharacter}}{{
                    controller.data.availableCredit | number: 2}}</span>
            </div>
        </div>
    </div>

As you may have noticed, I am using angular js so I am not using jQuery, so pure javascript is needed if any javascript is needed at all!

I have set up a codepen so you can see my current version:

https://codepen.io/r3plica/pen/JJpwRe

If someone could help me, that would be awesome.

Answer 1

See here I added following javascript

var percentColors = [
{ pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
{ pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
{ pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
} 

And modified your update function, as well as I added transition:0.5s; to you .fill css