I have a circular progress bar and I want to change the progress bar's color based on the percentage but cant seem to do it (using jsp)

JQUERY

I want to change the color of the progress bar based on the percentage I get. i tried it putting like this in the jquery itself like this but its not working.

$(el).circleProgress({fill : {color : '<%= colorCode %>'}}).on('circle-animation-progress', function(event, progress, stepValue)

function Circlle(el)
{
    $(el).circleProgress().on('circle-animation-progress', function(event, progress, stepValue)
    {
        if(stepValue >= 1)
        {
            $(this).find('strong').text('100%');
            $(this).css('color' ,'forestgreen');
        }
        else
        {
            $(this).find('strong').text(String(stepValue.toFixed(2)).substr(2)+'%');
            if(stepValue >= 0.8)
                $(this).css('color' ,'forestgreen');
            else if(stepValue >= 0.6)
                $(this).css('color' ,'lightgreen');
            else if(stepValue >= 0.4)
                $(this).css('color' ,'yellow');
            else if(stepValue >= 0.2)
                $(this).css('color' ,'orange');
            else
                $(this).css('color' ,'red');
        }
    });  
};
});
Circlle('.round');

HTML

<div class="round" data-value="<%= pct %>" data-size="100" data-thickness="5">
    <strong></strong>                 
</div>