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

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!!!)_
```html

```
```js
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 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,

Start with the circle-animation-progress handler shown in the issue and inspect how the data-fill option is processed by the plugin. Determine whether the event and existing configuration support changing the progress color during animation; done means documenting or verifying a working approach for the requested red-to-green behavior.

Written by the indexing model from the issue text.