<div id="anime-demo">
  <h2>Total Files: 1000</h2>
  <h2 class="scan-headline">Files Scanned: <span class="scan-count">0</span></h2>
  <h2 class="infected-headline">Infected Files: <span class="infected-count">0</span></h2>
</div>

<div class="controls">
<button class="play-scan">Replay Scanning</button></div>
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

button {
  background: orange;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: blue;
}

.scan-headline {
  color: cornflowerblue;
}

.infected-headline {
  color: red;
}
var filesScanned = { count: 0, infected: 0 };

var scanning = anime({
  targets: filesScanned,
  autoplay: false,
  count: 1000,
  infected: 8,
  easing: 'linear',
  round: 1,
  update: function() {
    var total = document.querySelector('.scan-count');
    total.innerHTML = filesScanned.count;
    
    var infected = document.querySelector('.infected-count');
    infected.innerHTML = filesScanned.infected;
  }
});

document.querySelector('.play-scan').onclick = scanning.restart;

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js