<div id="anime-demo">
  <p>Transferring files to the hard disk: <progress value="0" max="100"></progress></p>
</div>
<div class="controls">
  <button class="play-progress">Animate Progress</button>
</div>
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

progress {
  margin-left: 10px;
  position: relative;
  top: 3px;
}

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;
}

#anime-demo {
  text-align: left;
}

.controls {
  margin-top: 0px;
}
var animateProgress = anime({
  targets: 'progress',
  value: 100,
  easing: 'linear',
  autoplay: false
});


document.querySelector('.play-progress').onclick = animateProgress.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