testing requestframeanim

by Marcos Moitas

HTML

<h1 id="display"></h1>
<svg class="wv-toast-progress" width="32" height="32" viewBox="0 0 32 32">
<circle class="wv-toast-progress--value" cx="16" cy="16" r="14" stroke-width="3"/>
</svg>


<script type="text/javascript">
(function() {
	// Source: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
	// shim layer with setTimeout fallback
	window.requestAnimFrame = (function(){
  		return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
	})();

	var lastTime = (new Date()).getTime();
	var displayNode = document.getElementById('display');
	var numSeconds = 0;
	(function timer() {
		requestAnimFrame(timer);
		var currentTime = (new Date()).getTime();

		if (currentTime - lastTime >= 1000) {

			console.log("Last Time: " + lastTime);
			console.log("Current Time: " + currentTime);

			lastTime = currentTime;
			numSeconds++;
			displayNode.innerText = numSeconds;
		}
	}());
}());

</script>

SCSS

.wv-toast-progress--value {
  fill: none;
  stroke: red;
  stroke-linecap: round;
  will-change: 'auto';
  contain: 'style';
  transition: 'all 0.1s';
}

JavaScript

//Radial progress settings
var progressValue = toast.querySelector('.wv-toast-progress--value');

var toastRadius = 14, toastCirc = 2 * Math.PI * toastRadius;

if (progressValue !== null) {
  progressValue.style.strokeDasharray = toastCirc;
}

function progress(value) {
  if (progressValue !== null) {
    var progressVar = value / 100;
    var dashoffset = toastCirc * progressVar;
    progressValue.style.strokeDashoffset = dashoffset;
  }
}