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

<div class="controls">
<button class="play-scan">Replay Scanning</button></div>

<p class="update-cb"></p>
<p class="begin-cb"></p>
<p class="run-cb"></p>
<p class="complete-cb"></p>
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

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

button:hover {
  background: blue;
}

.scan-headline {
  color: cornflowerblue;
}

.infected-headline {
  color: red;
}

h2 {
  line-height: 0.8;
  font-size: 1.2em;
}

p {
  line-height: 0.5;
  color: green;
  font-weight: bold;
}
var filesScanned = { count: 0, infected: 0 };
var scanCount = document.querySelector(".scan-count");
var infected = document.querySelector(".infected-count");

var scanning = anime({
  targets: filesScanned,
  autoplay: false,
  count: 100,
  infected: 8,
  delay: 1000,
  duration: 2000,
  easing: "linear",
  round: 1,
  update: function(anim) {
    if (anim.currentTime < 1000) {
      document.querySelector(".update-cb").innerHTML = "Creating an Index...";
    }
  },
  begin: function() {
    document.querySelector(".begin-cb").innerHTML = "Starting the Scan...";
  },
  run: function() {
    scanCount.innerHTML = filesScanned.count;
    infected.innerHTML = filesScanned.infected;
  },
  complete: function() {
    document.querySelector(".complete-cb").innerHTML = "Scan Complete...";
  }
});

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