js-progressbar.js
<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/0.6.1/dist/progressbar.js"></script>
<div id="container"></div>
<script>
//var ProgressBar = require('progressbar.js'); //for nodejs, but don;t use
// line style
var bar = new ProgressBar.Line('#container', {
easing: 'easeInOut'
strokeWidth: 4,
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
//text setting
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
//step event
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
bar.animate(1); // Value from 0.0 to 1.0
</script>
more: http://kimmobrunfeldt.github.io/progressbar.js/