JSFiddle - React, Tailwind, and code Playground

by Kevin Mwangi

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>

CSS

#container {
  margin: 20px;
  width: 150px;
  height: 30px;
}

Babel + JSX

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

var bar = new ProgressBar.Line(container, {
  strokeWidth: 30,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 30,
  svgStyle: {width: '100%', height: '100%'},
  from: {color: '#cbefda'},
  to: {color: '#51c982'},
  step: (state, bar, shape, attachment) => {
    bar.path.setAttribute('stroke', state.color);
    /* attachment.text.innerHTML = shape.value() * 100 */;
  }
});

/* function(state, shape, attachment) {
    shape.path.setAttribute('stroke-width', state.width);
    shape.path.setAttribute('stroke', state.color);
    attachment.text.innerHTML = shape.value() * 100;
} */

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