JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 6 200">
<path fill-opacity="0" stroke-width="2" stroke="#bbb" d="M 0 0 L 0 200"/>
<path id="line-path" fill-opacity="0" stroke-width="6" stroke="#ED6A5A" d="M 0 0 L 0 200"/>
</svg>
</div>
CSS
#container {
margin: 20px;
width: 6px;
height: 200px;
}
Babel + JSX
// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.Path('#line-path', {
easing: 'easeInOut',
duration: 1400
});
bar.set(0);
bar.animate(1.0); // Number from 0.0 to 1.0