Semi Circle Progress bar

by Faisal Khan Janjua

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container">
  <span class="abs1">250</span>
  <span class="abs2">100000</span>
</div>

CSS

body {
  margin:0;
  padding:20px;
}
#container {
  width: 100%;
  height: 340px;
}
.abs1{
  position:absolute;
  bottom:-12px;
  color:#F99;
  left:50px;
}
.abs2{
  position:absolute;
  bottom:-12px;
  color:#F99;
  right:34px;
}

Babel + JSX

// [email protected] version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 20,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 20,
  easing: 'easeInOut',
  duration: 1400,
  svgStyle: null,
  text: {
    value: 'This is Val',
    alignToBottom: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  // Set default step function for all animate calls
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
    var value = Math.round(bar.value() * 100);
    if (value === 0) {
      bar.setText('');
    } else {
      bar.setText(value);
    }
    bar.setText(value);

    bar.text.style.color = state.color;
  }
});
bar.text.style.fontFamily = '"korek", Helvetica, sans-serif';
bar.text.style.fontSize = '36px';
bar.animate(0.7);  // Number from 0.0 to 1.0