0

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>
Jaya Lodha
  • 1
  • 3
  • why are you mixing $(this) and progress when you set your colors? The color property in the CSS will only change the color of the text and not the progress bar. You'll probably need to change it's background color or something else. – VVV Nov 13 '19 at 05:51
  • background color isn't working. Its just changing the color of div and not the circle's color. – Jaya Lodha Nov 13 '19 at 05:59

0 Answers0