Radial Progress Bar

by Stephen Irving

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
<div class="container">
  <div id="radial_wrapper" class="radial-wrapper"></div>
</div>

CSS

.container {
    height: 500px;
    width: 500px;
    margin: 0 auto;
}

.radial-wrapper {
    margin: 0 auto;
    width: 15em;
    height: 15em;
    position: relative;
}

JavaScript

var animationTime = 1400;

var bar = new ProgressBar.Circle(radial_wrapper, {
    color: '#414042',
    strokeWidth: 6, // To prevent clipping, make the same as max width
    trailWidth: 6,
    easing: 'easeInOut',
    duration: animationTime,
    text: {
     	 autoStyleContainer: false
    },
    // Changes loading bar color & width as it progresses
    from: { color: '#d51f27', width: 1 },
    to: { color: '#a11d27', width: 6 }, // To prevent clipping, make this the same as strokeWidth

    step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
        circle.path.setAttribute('stroke-width', state.width);

        var value = Math.round(circle.value() * 100);
        if (value === 0) {
          	circle.setText('');
        } else {
          	circle.setText(value);
        }
	  }
});

bar.text.style.fontFamily = '"Roboto", Helvetica, sans-serif';
bar.text.style.fontSize = '2.8rem';

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