tweening-counter

A counter that uses a timing function to move towards it's destination. An example usage is a currently active sessions count on a realtime analytics dashboard.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>tweening-counter</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="wrapper"></div>
  <script src='https://rawgithub.com/tanem/tweening-counter/master/standalone/tweening-counter.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.wrapper {
  bottom: 0;
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 1020px;
}
  
.tweening-counter {
  color: #FFF;
  float: left;
  font-size: 120px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  width: 200px;
}

.tweening-counter:first-child {
  background-color: #77CC62;
}

.tweening-counter:nth-child(2) {
  background-color: #F0D848;
}

.tweening-counter:nth-child(3) {
  background-color: #5280C7;
}

.tweening-counter:nth-child(-n+4) {
  margin-right: 5px;
}

.tweening-counter:nth-child(4) {
  background-color: #FA8C82;
}


.tweening-counter:last-child {
  background-color: #F23A3A;
}
/* Downloaded from https://www.codeseek.co/ */
// tweening-counter GitHub repo: https://github.com/tanem/tweening-counter

// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.raf = (function(){
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function(callback){
      window.setTimeout(callback, 1000 / 60);
    };
})();

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Example:_Using_Math.random
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// This demo uses the standalone tweening-counter build, which exposes TweeningCounter as a global.
var tweeningCounters = [
  new TweeningCounter().duration(3000).onEnd(loop),
  new TweeningCounter().duration(3000).onEnd(loop),
  new TweeningCounter().duration(3000).onEnd(loop),
  new TweeningCounter().duration(3000).onEnd(loop),
  new TweeningCounter().duration(3000).onEnd(loop)
];

var wrapper = document.querySelector('.wrapper');
tweeningCounters.forEach(function(tweeningCounter){
  wrapper.appendChild(tweeningCounter.el);
});

// Run the tweening counter towards a random int between 0 and 50,
// with a delay of between 0.5s and 2s between each run.

function loop(start, delay) {
  var now = Date.now();
  start = start || Date.now();
  delay = delay || random(500, 2000);
  if (now - start >= delay) {
    start = null;
    return run(this);
  }
  raf(loop.bind(this, start, delay));
}

function run(tweeningCounter) {
  tweeningCounter
    .to(random(0, 50))
    .start();
}

tweeningCounters.forEach(run);

This awesome code ( tweening-counter ) is write by Tane Morgan, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Tane Morgan