JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rendro.github.io/easy-pie-chart/javascripts/jquery.easy-pie-chart.js"></script>
    <ul>
      <li><span class="newValue">25</span></li>
      <li>
        <div class='pieCharts'>
          <div class='chart'>
            <div class='percentage' data-percent='50'><span>0</span><sup>%</sup></div>
          </div>
        </div>
      </li>
    </ul>

JavaScript

$('.percentage').attr('data-percent', $(this).closest('.newValue').html());
    
    $('.percentage').easyPieChart({
      animate: 1000,
      lineWidth: 8,
      barColor: '#00aeef',
      scaleColor: 'transparent',
      onStep: function(value) {
        this.$el.find('span').text(Math.round(value));
      },
      onStop: function(value, to) {
        this.$el.find('span').text(Math.round(to));
      }
    });