Circle Progress

HTML

<link rel="stylesheet" href="https://rawgit.com/connors/photon/master/dist/css/photon.css">
<link rel="stylesheet" href="https://rawgit.com/MauriceConrad/PhotonKit-Components/master/Photon-Components/progress-circle/dist/progress-circle.css">
<script src="https://rawgit.com/MauriceConrad/PhotonKit-Components/master/Photon-Components/progress-circle/dist/progress-circle.js"></script>
<div class="progress-circle"></div>
<br />
<div class="progress-circle" style="width: 30px; height: 30px;"></div>
<br />
<div class="progress-circle" style="width: 50px; height: 50px;"></div>
<br />
<input type="number" min="0" max="100" id="input-progress" value="0"/>

CSS

body {
  padding: 10px;
}

JavaScript

var progressCircles = document.getElementsByClassName("progress-circle");
document.getElementById("input-progress").addEventListener("input", function() {
  var val = parseFloat(this.value);
  progressCircles[0].updateCircleProgress(val);
  progressCircles[1].updateCircleProgress(val);
  progressCircles[2].updateCircleProgress(val);
});