jquery circle progress |当超过100％时更改颜色

我正在使用jquery循环进度库。我需要将完整进度表示为100％，但实际值为150％。jquery circle progress |当超过100％时更改颜色

我需要改变额外50％的颜色。

下面是HTML：

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

这里是JS：

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

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

我如何可以改变的，额外的50％的色？

来源

2016-11-17 Frelimino

我最后一次检查，圆只有360度... 100％是360度......你是如何在一个设计只显示100％的圈子中显示超过100％的？该jQuery的圈子进展库不会这样做。你将不得不创建一个自定义版本作为“进度”意味着它从0％到100％:) –

@GoneCoding我需要它保持重叠和显示并覆盖在不同的颜色 – Frelimino

用户不会感到困惑，并会看到它只有50％？ –

这不正是你想要的（因为你不能用在价值数> 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>

来源

2016-11-17 13:59:06 Dekel

如何在两个圆圈中间添加文本？ – Frelimino

您可以使用另一个元素：https：//jsfiddle.net/vz9dr78a/4/ – Dekel

创建第二个，例如：首先你可以展示额外的小圆圈，例如：

$('#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>

来源

2016-11-17 14:02:57

基本上一样的其他尝试，但我想消灭第二圈的滞后感觉出发，所以感觉更自然。

// 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/

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

来源

2016-11-17 14:12:29 Datsik

很好的解决方案。恕我直言 - 如果你给出一个基于另一个解决方案的答案，它只是有道理的，你投票的另一个答案，你是基于:) – Dekel

@Dekel公平我几乎做了我的小提琴，当你们张贴你的答案，所以技术上我没' t基于我的回答你的家伙':)但我会给你一个友好的投票无论如何:) – Datsik

从我这里得到了一个:) :) – Dekel

jquery circle progress |当超过100％时更改颜色

回答

相关问题