baueradvance/httpdocs/templates/bauer/script_progressbar.html5

<script>
function makeCircles() {
  var divsValues = {
    <?php if($this->percent_1): ?>'reader-score-circle': 0.<?= $this->percent_1; ?>,<?php endif ?>
    <?php if($this->percent_2): ?>'age-score-circle': 0.<?= $this->percent_2; ?>,<?php endif ?>
    <?php if($this->percent_3): ?>'netto-score-circle': 0.<?= $this->percent_3; ?>,<?php endif ?>
    <?php if($this->percent_4): ?>'education-score-circle': 0.<?= $this->percent_4; ?>,<?php endif ?>
  };

  for (var i in divsValues) {
    if (divsValues.hasOwnProperty(i)) {
      bgCircles(i, divsValues[i]);
    }
  }
}
makeCircles();

function isScrolledIntoView(elem) {
  var docViewTop = jQuery(window).scrollTop();
  var docViewBottom = docViewTop + jQuery(window).height();
  var elemTop = jQuery(elem).offset().top;
  var elemBottom = elemTop + jQuery(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function checkVisibility(elem, bar, countvalue) {
  if (isScrolledIntoView(elem)) {
  	if (!elem.hasClass("circle-visible")) {
    	bar.animate(countvalue);
		elem.addClass("circle-visible");
  	}
  } else {
   // bar.animate(0);
  }
}


function bgCircles(divid, countvalue) {

  var elem = jQuery('#' + divid);
  
  var bar = new ProgressBar.Circle(elem.get(0), {
    color: '#0000DC',
    strokeWidth: 4,
    trailWidth: 4,
    easing: 'easeInOut',
    duration: 1000,
    trailColor: '#B4D7F7',
    text: {
      autoStyleContainer: false
    },
    from: {
      color: '#0000DC',
      width: 4
    },
    to: {
      color: '#0000DC',
      width: 4
    },

    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + '%');
      }
    }
  });
  bar.text.style.fontFamily = 'futura-pt, sans-serif';
  bar.text.style.fontSize = '2.813rem';
  bar.trail.setAttribute('stroke-linecap', 'round');
  bar.path.setAttribute('stroke-linecap', 'round');


  checkVisibility(elem, bar, countvalue);

  $(window).scroll(function () {
    checkVisibility(elem, bar, countvalue);
  });
}
</script>