自定义圆圈进度条：通过渐变更改颜色

Question

我有3个进度条，我想根据数据得分更改颜色，我尝试比较数据编号并添加css类，但是仅应用圆圈的一部分，我希望逐步更改颜色

html

                    <div class="radial-progress" data-score="<?php //echo $r_controls ?> 2">
                        <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>
                        <div class="inset flex flex-align-center flex-justify-center"><span class='big'><?php echo $r_controls ?></span></div>
                    </div>

jquery

window.randomize = function() {
    $('.radial-progress').each(function() {
        var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
        $(this).find('span').fadeTo('slow', 1);
        var score = $(this).data('score');
        var deg = (((100 / 5) * score) / 100) * 180;
        var rotation = deg;
        var fill_rotation = rotation;
        var fix_rotation = rotation * 2;
        for(i in transform_styles) {
            $(this).find('.circle .fill, .circle .mask.full').css(transform_styles[i], 'rotate(' + fill_rotation + 'deg)');
            $(this).find('.circle .fill.fix').css(transform_styles[i], 'rotate(' + fix_rotation + 'deg)');
        }
        if (score == 2){
            $('.fill').addClass('fill-2');
        }
    });
}
setTimeout(window.randomize, 200); 

css：

           .fill-1 {
                clip: rect(0px, 60px, 120px, 0px);
                background-color: black;
             }
             .fill-2 {
                clip: rect(0px, 60px, 120px, 0px);
                background-color: green;
             }                     
             .fill-3 {
                clip: rect(0px, 60px, 120px, 0px);
                background-color: yellow;
             }                    
             .fill-4 {
                clip: rect(0px, 60px, 120px, 0px);
                background-color: red;
             }                    
             .fill-5 {
                clip: rect(0px, 60px, 120px, 0px);
                background-color: purple;
             }