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

'use strict';

var animationTime = 1400;
var progress = 0;

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 step(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(0.7); // Number from 0.0 to 1.0