SDC Progress Bar

Shows bar and percent

by Ford Heacock

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>

CSS

* {
  background-color: #5700ff;
}

#container {
  margin: 20px;
  width: 400px;
  height: 20px;
}

svg {
  border-radius: 50px;
  border: 5px white solid;
}

.progressbar-text {
  font-family: sans-serif;
  font-weight: 800;
  font-size: 2em;
}

Babel + JSX

const bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#29c4d1',
  trailColor: '#5700ff',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  text: {
    style: {
      color: 'white',
      position: 'absolute',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});

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