Ajay Kumar Ajay Kumar - 29 days ago 6
jQuery Question

Jquery Circle progress bar value more than 100%

I'm working on a jQuery circle progress bar with reference of Circlefuljs (https://github.com/pguso/jquery-plugin-circliful). Everything works fine in this plugin, but in some scenarios my percentage reaches more than 100%. If the percentage value is 120% the circle is filled fully for its 100% and it seems to be overlapped with the same color for the next 20%. In this case, from the end user point of view, they cant see the variation and it seems to be confusing. So I need some variation to show that extra 20% in some different colors are some other things. Here is my snippet I tried with https://jsfiddle.net/heh12u5v/7/

<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div style="width:400px">
<div id="test-circle"></div>
</div>

var value = 120
$(document).ready(function() {
$("#test-circle").circliful({
animationStep: 5,
foregroundBorderWidth: 15,
backgroundBorderWidth: 15,
percent: value,
});
});


I don't know whether my question is right or not, but I face this scenario. Is there any possible way to do this so that extra 20% percent shows with a thin line with some color? If any thing please suggest it to me. It will be very helpful for me. Thanks in advance.

Answer

Sometimes things are not as tidy as you imagine..

var value = 120
$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value,
  });
  
  if(value > 100){
    var extra = value - 100;
    $("#test-circle-time").circliful({
      animationStep: 5,
      foregroundBorderWidth: 0,
      backgroundBorderWidth: 0,
      percent: 100,
      percentageTextSize:0
    },function(){
    	$("#test-circle-extra").circliful({
        animationStep: 5,
        foregroundBorderWidth: 8,
        backgroundBorderWidth: 8,
        percent: extra,
        backgroundColor: "none",
        foregroundColor:'#a33',
        percentageTextSize:0
      });
    });
  }
});
#circle-container{
  postition:relative;
}
#circle-container > div{
 position:absolute;
 top:0;
 left:0;
 width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div id="circle-container">
  <div id="test-circle"></div>
  <div id="test-circle-time"></div>
  <div id="test-circle-extra"></div>
</div>

what we did was if the value is greater than 100, we add another circle that runs at the same time, is invisible, and only goes to 100. This allows us to know when the first circle reaches 100%. Then when 100 is reached we add a 3rd thinner one for the remaining value.

In this way:

  1. We keep the percentage counting smoothly from 0 to 120%
  2. We have the "extra" start exactly when the percent passes 100%

Yes.