Frelimino Frelimino - 22 days ago 10
Javascript Question

jquery circle progress | change colour when exceeds 100%

I am using the jquery circle progress library. I need to have the full progress represent as 100%, however the actual value placed on is 150%.

I need to change the colour of that extra 50%.

Here is the HTML:

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


Here is the JS:

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


The following is a fiddle: https://jsfiddle.net/2pekq9zw/

How can I change the colour of that extra 50% ?

Answer

This is not exactly what you want (because you can't use number > 1 in the value), but the final view is what you are looking for:
https://jsfiddle.net/vz9dr78a/2/

I created two circles that overlap each other, the first is 100% and the second is 50%. Once the animation of the first circle is done - the animation of the second circle will start:

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

here is a snippet:

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