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

这不完全符合您的要求（因为您无法在数值中使用数字＆gt; 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)'
  })
});

这是一个片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

基本上和其他尝试一样，虽然我试图消除第二个圆圈的滞后感觉，但感觉更自然。

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

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

Answer 3

通过创建覆盖在第一个上的第二个较小的圆圈，您可以显示额外的圆圈，例如：

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

jquery圈进度|超过100％时更改颜色

3 个答案: