Radial Progress-GREENFORK

green fork

by Stephen Irving

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<body onload="loadFunction()">
<table>
  <tr>
    <th>EXAMPLE NUMBERS</th>
  </tr>
  <tr>
    <td id="num_1">NUM1: 53</td>
  </tr>
  <tr>
    <td id="num_2">NUM2: 96</td>
  </tr>
</table>


<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
<div class="container">
  <div id="radial_wrapper" class="radial-wrapper"></div>
</div>

<script type="text/javascript">
   var myNum1 = document.getElementById('num_1');
	 var myNum2 = document.getElementById('num_2');
</script>
</body>

CSS

table {
  padding: 20px;
  border: 2px solid black;
  float: left;
  display: inline;
}
th {
  border-bottom: 2px solid black;
}
td {
  border: 1px solid black;
  text-align: center;
}
.container {
    float: right;
    height: 500px;
    width: 500px;
    margin: 0 auto;
}

.radial-wrapper {
    margin: 0 auto;
    width: 15em;
    height: 15em;
    position: relative;
}

Babel + JSX

'use strict';

var animationTime = 1400;
var progress = 0;

var progress = myNum1; // A number between 0 and 1.0

var bar = new ProgressBar.Circle(radial_wrapper, {
	color: '#58b86b',
  strokeWidth: 8, // To prevent clipping, make the same as max width
  trailWidth: 8,
  trailColor: '#e2e2e2',
  easing: 'easeInOut',
  duration: animationTime,
  text: {
    autoStyleContainer: false
  },
  // Changes loading bar color & width as it progresses
  from: { color: '#a7a9ac', width: 1 },
  to: { color: '#58b86b', width: 8 }, // To prevent clipping, make this the same as strokeWidth

  step: function step(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value + '%');
    }
  }
});

bar.text.style.fontFamily = '"Roboto", Helvetica, sans-serif';
bar.text.style.fontSize = '2.8rem';

bar.animate(progress); // Number from 0.0 to 1.0