Swish Meter

A quick demo of how the Swish meter could look...

by Tim Noetzel

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>

CSS

#container {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #fff;
  border-radius:50%;
}

Babel + JSX

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

var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 15,
  trailWidth: 15,
  trailColor: '#DDDDDD',
  easing: 'easeInOut',
  duration: 1600,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#348FD0', width: 15 },
  to: { color: '#348FD0', width: 15 },
  // 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 = Math.round(circle.value() * 1500);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText('$' + value);
    }

  }
});
bar.text.style.fontFamily = '"Proxima Nova", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.text.style.fontWeight = '600';
bar.text.style.color = '#348FD0';
bar.text.style.marginTop = '5px';

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