progressbar.js example

by katalin_2003

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="container">
  <div id="chart"></div>
</div>

CSS

#container {
  margin: 20px;
  width: 160px;
  height: 160px;
  position: relative;
}

#chart {
  width: 100%;
  height: 100%;
}

JavaScript

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

var globalValue = 60;

var bar = new ProgressBar.Circle(chart, {
  color: '#F00',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 6,
  trailColor: '#eee',
  trailWidth: 6,
  easing: 'easeInOut', // 'bounce'
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 6 },
  to: { color: '#000', width: 6 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = globalValue;
    if (value === 0) {
      circle.setText('0%');
    } else {
      circle.setText(value + '<span style="font-size: 0.8em; color: #000;">%</span>');
    }

  }
});
// bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontFamily = 'sans-serif';
bar.text.style.fontSize = '2.4em';
// Set the text size a 5th of the chart container's width, make sure to refresh on screen resize via a function
// bar.text.style.fontSize = bar._container.clientWidth / 5 + 'px';

console.log(bar);

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