jquery time circles

by Bram Gadeyne

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/master/dist/circle-progress.js"></script>
<div id="progress-bar-start" class="pgb_cd" value="10">
</div>
<div id="mathpival">
</div>
<div id="debug">
</div>

CSS

.pgb_cd {
  height: 380px;
  margin: 20px;
  display: inline-block;
  position: relative;
  text-align: center;
}

JavaScript

var settings={};

settings.pb = $('#progress-bar-start');

/* start test counter waarden  */

settings.pgb_cd_obj = settings.pb.circleProgress({
	size: settings.pb.parent().height(),
  thickness: settings.pb.parent().height()/7,
  value:1.0,
  startAngle:-Math.PI/2,
  animation:{duration:0},
  animationStartValue:1.0,
  fill: { color: 'rgba(232, 84, 58, 1.0)' },
  emptyFill: 'rgba(232, 84, 58, .3)'
});

settings.pgb_cd_countMax = parseInt(settings.pb.attr('value'));
settings.pgb_cd_count = settings.pgb_cd_countMax;
settings.pgb_cd_text = settings.pb.find('strong');
settings.pgb_cd_text.text(settings.pgb_cd_countMax);

var intid = setInterval(function(settings){
	settings.pgb_cd_count--;
  settings.pgb_cd_text.text(settings.pgb_cd_count);
  settings.pgb_cd_obj.circleProgress('value', Math.abs(settings.pgb_cd_count/settings.pgb_cd_countMax));
 	//settings.pgb_cd_obj.circleProgress('size', 100);
  $('#debug').text("cd_count: "+settings.pgb_cd_count+" progress_value: "+(settings.pgb_cd_count/settings.pgb_cd_countMax));

  if(0>=settings.pgb_cd_count){
      clearInterval(settings.intid)
      console.log("Starting test");
  }
}, 1000, settings)
settings.intid = intid;
$('#mathpival').text(-Math.PI/2);