jquery circle progress |當超過100％時更改顏色

Question

我正在使用jquery循環進度庫。我需要將完整進度表示爲100％，但實際值爲150％。

我需要改變額外50％的顏色。

下面是HTML：

<div id="circle"></div> 

這裏是JS：

$('#circle').circleProgress({ 
    value: 1.50, 
    size: 100, 
    fill: { color: "#ff1e41" } 
    }); 

下面是一個小提琴：https://jsfiddle.net/2pekq9zw/

我如何可以改變的，額外的50％的色？

Answer 1

這不正是你想要的（因爲你不能用在價值數> 1），但最後的觀點是，你在找什麼：
https://jsfiddle.net/vz9dr78a/2/

我創建了兩個圓圈重疊彼此，第一個是100％，第二個是50％。 一旦第一個圓的動畫完成 - 第二圈的動畫將開始：

$('#circle1').circleProgress({ 
    value: 1, 
    size: 100, 
    fill: { color: "#ff1e41" } 
}).on('circle-animation-end', function() { 
    $('#circle2').circleProgress({ 
    value: 0.5, 
    size: 100, 
    fill: { color: "#00ff00" }, 
    emptyFill: 'rgba(0, 0, 0, 0)' 
    }) 
}); 

這裏是一個片段：

$('#circle1').circleProgress({ 
 
    value: 1, 
 
    size: 100, 
 
    fill: { color: "#ff1e41" } 
 
    }).one('circle-animation-end', function() { 
 
    \t $('#circle2').circleProgress({ 
 
     value: 0.5, 
 
     size: 100, 
 
     fill: { color: "#00ff00" }, 
 
     emptyFill: 'rgba(0, 0, 0, 0)' 
 
    }) 
 
    });

.circle-container { 
 
    position: relative; 
 
} 
 
.circle-container .circle { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.js"></script> 
 

 
<div class="circle-container"> 
 
    <div id="circle1" class="circle"></div> 
 
    <div id="circle2" class="circle"></div> 
 
</div>

Answer 2

創建第二個，例如：首先你可以展示額外的小圓圈，例如：

$('#circle').circleProgress({ 
 
    value: 1, 
 
    size: 100, 
 
    fill: { color: "#ff1e41" } 
 
    }); 
 
    $('#circle2').circleProgress({ 
 
    value: 0.50, 
 
    size: 94, 
 
    fill: { color: "darkred" } 
 
    });

#circle { position:absolute; top:0;left:0} 
 
#circle2 { position:absolute;top: 3px; left: 3px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.js"></script> 
 
<div id="circle"></div> 
 
<div id="circle2"></div>

Answer 3

基本上一樣的其他嘗試，但我想消滅第二圈的滯後感覺出發，所以感覺更自然。

// js 
$('#circle1').circleProgress({ 
    value: 1, 
    size: 100, 
    animation: { duration: 1200, easing: "linear" }, 
    fill: { color: "#ff1e41" } 
}); 

$('#circle1').on('circle-animation-end',() => { 
    $('#circle2').circleProgress({ 
     value: .50, 
     animation: { duration: 1200, easing: "linear"}, 
     size: 100, 
     fill: { color: "#00FF00" }, 
     emptyFill: 'rgba(0, 0, 0, 0)' 
    }); 
}) 

// css 
#circle1 { 
    position: absolute; 
} 
#circle2 { 
    position: absolute; 
} 

// html 
<div id="circle1"></div> 
<div id="circle2"></div> 

https://jsfiddle.net/2pekq9zw/10/

如果你注意到，我的圈子融合在一起比其他更好的答案有點