CODEWITHSUNDEEP
javascriptjqueryprogress-bar
Frelimino
Frelimino

Reputation: 23

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

Upvotes: 2

Views: 1320

Answers (3)

Datsik
Datsik

Reputation: 14824

Basically the same as the other attempts, though I tried to eliminate the lagging feel of the second circle starting so it feels more natural.

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

If you notice, my circles blend together a bit nicer than the other answers

Upvotes: 2

Dekel
Dekel

Reputation: 62566

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>

Upvotes: 2

Dan Delaney
Dan Delaney

Reputation: 353

By creating a second, smaller circle overlayed on the first you could show the extra, for example:

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

Upvotes: 0

Related Questions