JSFiddle - React, Tailwind, and code Playground

by Kelsey Williams

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container1" class="progressBar"></div>

CSS

.progressBar {
  margin: 20px;
  width: 200px;
  height: 100px;
}

Babel + JSX

// [email protected] version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
console.log(document.getElementById('container1'));
console.log(container1);
var bar = new ProgressBar.Circle(container1, {
  strokeWidth: 15,
  color: '#aaa',
  trailColor: '#eee',
  trailWidth: 10,
  easing: 'easeInOut',
  duration: 1400,
  svgStyle: null,
  text: {
    value: '',
    alignToBottom: true
    
  },
  from: {color: '#ED6A5A'},
  to: {color: '#41f48c'},
  // 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.text.style.color = state.color;
  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.text.style.marginTop = '45px';



function capacity(){
	var x = Math.floor((Math.random()*100.00))/100.00;
  //document.getElementById("text").innerHTML = x;
	bar.animate(x);  // Number from 0.0 to 1.0
}

//setInterval(capacity, 2400);