javascript - jquery circle progress | change colour when exceeds 100% -

i using jquery circle progress library. need have full progress represent 100%, actual value placed on 150%.

i need change colour of 50%.

here html:

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

here js:

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

the following fiddle: https://jsfiddle.net/2pekq9zw/

how can change colour of 50% ?

this not want (because can't use number > 1 in value), final view looking for:
https://jsfiddle.net/vz9dr78a/2/

i created 2 circles overlap each other, first 100% , second 50%. once animation of first circle done - animation of second circle 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 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>