[progressbar.js] 프로그레스 바 만들기

 

progressbar.js

0.04MB

https://jsfiddle.net/kimmobrunfeldt/sqwdkrg0/

Edit fiddle - JSFiddle - Code Playground

<script src="js/progressbar.js"></script>

        <script>
        var bar = new ProgressBar.SemiCircle('#progress1', {
          strokeWidth: 6,
          color: '#FFEA82',
          trailColor: '#eee',
          trailWidth: 1,
          easing: 'easeInOut',
          duration: 1400,
          svgStyle: null,
          text: {
            value: '',
            alignToBottom: true
          },
          from: {color: '#FFEA82'},
          to: {color: '#ED6A5A'},
          // Set default step function for all animate calls
          step: (state, bar) => {
            bar.path.setAttribute('stroke', state.color);
            var value = Math.round(bar.value() * 100);
            if (value === 0) {
              bar.setText('');
            } else {
              bar.setText(value);
            }

            bar.text.style.color = state.color;
          }
        });
        bar.text.style.fontSize = '1.5rem';

        /*bar.animate(1.0);*/  // Number from 0.0 to 1.0
        </script>