tweening-counter

In this example below you will see how to do a tweening-counter with some HTML / CSS and Javascript

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.

Thumbnail
This awesome code was written by tanem, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tanem ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/tanem/tweening-counter-AaxDd */
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/tanem/tweening-counter-AaxDd */
// 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);

Comments