hoangweb
5/15/2016 - 3:09 AM

js-progressbar.js

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/