jquery圈子进度|超过 100% 时改变颜色

Question

我正在使用 jquery 圈子进度库。我需要将完整进度表示为 100%，但实际设置的值为 150%。

我需要更改那额外 50% 的颜色。

这里是 HTML:

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

这是JS：

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

下面是fiddle：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() {
   $('#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/

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

jquery圈子进度|超过 100% 时改变颜色

jquery circle progress | change colour when exceeds 100%

javascript

jquery

progress-bar