JSFiddle - React, Tailwind, and code Playground

by Stephen Irving

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 115 95" style="enable-background:new 0 0 115 95;" xml:space="preserve">
   <style type="text/css">
	.st0{fill:#e2e2e2;stroke:#000;stroke-miterlimit:10;}
</style>
<rect id="Bar" x="0" y="0" class="st0" width="115" height="95" fill-opacity="0" stroke="1"/>
</svg>
</div>

CSS

#container {
  margin: 20px;
  width: 200px;
  height: 200px;
}

Babel + JSX

var bar = new ProgressBar.Path('Bar', {
  easing: 'easeInOut',
  duration: 1400
});

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