How to Change Color Dynamically on "circle-animation-progress"

[KiddoV]

Hello,
First of all, thanks for the plugin!
I want the progress bar color change from "red" to "green" base on the percentage when the "circle-animation-progress" event happens.
(Don't have to be fancy like radiant color, just a static color!!!)

<div class="circle" data-value="0.30" data-size="67" data-thickness="10" data-fill="{}">
    <strong style="font-size: 1.2em;"></strong>
</div>

var progrColors = [	
{percent: 0, color: '#57bb8a'}, 
{percent: 5, color: '#63b682'}, 
{percent: 10, color: '#73b87e'},
{percent: 15, color: '#84bb7b'}, 
{percent: 20, color: '#94bd77'}, 
{percent: 25, color: '#a4c073'},
{percent: 30, color: '#b0be6e'}, 
{percent: 35, color: '#c4c56d'}, 
{percent: 40, color: '#d4c86a'}, 
{percent: 45, color: '#e2c965'}, 
{percent: 50, color: '#f5ce62'}, 
{percent: 55, color: '#f3c563'},
{percent: 60, color: '#e9b861'}, 
{percent: 65, color: '#e6ad61'}, 
{percent: 70, color: '#ecac67'}, 
{percent: 75, color: '#e9a268'}, 
{percent: 80, color: '#e79a69'}, 
{percent: 85, color: '#e5926b'},
{percent: 90, color: '#e2886c'}, 
{percent: 95, color: '#e0816d'}, 
{percent: 100, color: '#dd776e'} 
];

$(".circle").circleProgress({lineCap: "round"})
.on("circle-animation-progress", function(event, progress) {
  let percent = $(this).attr("data-value") * 100;
  /* ===============> Change color here maybe (somehow?)  <===============*/
  // fill = progrColors[percent].color ???
  $(this).find("strong").html(Math.round(percent * progress) + "<i>%</i>");
});

I cannot find a properly way to do it.
Any helps would be appreciated!!!
If you have a better way other than using the Array object, please let me know!
Thanks,